[windows/flutter] 深入了解屬性

參考網址


1.

    Widget testCrossAxisAlign = Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(
          child: Image.asset('images/pic1.jpg')
        ),
        Expanded(
          child: Image.asset('images/pic2.jpg')
        ),
        Expanded(
          child: Image.asset('images/pic3.jpg')
        ),
      ]
    );

1-1. 若沒有用Expanded包住，Image會照著原本大小然後噴出去

    Widget testCrossAxisAlign = Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: Image.asset('images/pic1.jpg')
        ),
        Expanded(
          flex: 2,
          child: Image.asset('images/pic2.jpg')
        ),
        Expanded(
          child: Image.asset('images/pic3.jpg')
        ),
      ]
    );

1-2. crossAxisAlignment(垂直對齊)和flex很像css的flex排版

crossAxisAlignment: CrossAxisAlignment.center,

1-3. 有三個child，大小比例是1:2:1 (長寬等比) (flex的用法)

2.圖片邊框

Widget _buildDecoration(int imageIndex) => Expanded(
    child: Container(
    decoration: BoxDecoration(
        border: Border.all(width: 10.0, color: Colors.black38),
        borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
    ),
    margin: const EdgeInsets.all(4.0),
    child:Image.asset('images/pic$imageIndex.jpg')
    )
);

Widget _buildImageRow(int imageIndex) => Row(
    children: [
    _buildDecoration(imageIndex),
    _buildDecoration(imageIndex + 1),
    ]
);

Widget _buildImageColumn() => Container(
    decoration: BoxDecoration(
    color: Colors.black26
    ),
    child: Column(
    children: [
        _buildImageRow(1),
        _buildImageRow(3),
    ]
    )
);

return ListView(
        children: [
            _buildImageColumn()
        ]
        );

3.共用樣式

final descTextStyle = TextStyle(
    color: Colors.black,
    fontWeight: FontWeight.w800,
    fontFamily: 'Roboto',
    letterSpacing: 0.5,
    fontSize: 18.0,
    height: 2.0
);

final iconList = DefaultTextStyle.merge(
    style: descTextStyle,
    child: Container(
    padding: EdgeInsets.all(20.0),
    child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
        Column(
            children: [
            Icon(Icons.kitchen, color: Colors.green[500]),
            Text('PREP:'),
            Text('25 min'),
            ]
        ),
        Column(
            children: [
            Icon(Icons.timer, color: Colors.green[500]),
            Text('COOK:'),
            Text('1 hr'),
            ]
        ),
        Column(
            children: [
            Icon(Icons.restaurant, color: Colors.green[500]),
            Text('FEEDS:'),
            Text('4-6'),
            ]
        ),
        ],
    )
    )
);

final leftColumn = Container(
    padding: EdgeInsets.fromLTRB(20.0,30.0,20.0,20.0),
    child: Column(
    children: [
        iconList
    ]
    )
);

return ListView(
        children: [
            leftColumn
        ]
        );