Flex

????????Flex彈性,從字面意義可以理解具有伸縮性,它允許子Widget按照一定的比例來分配父容器的空間,在Flutter中彈性布局功能很強大,可以結合Expanded實現彈性布局.如果在已知主軸方向的情況下,使用Row或者Column會方便一些,因為這個兩個Widget也是繼承自Flex.

Flex({
    Key key,
    @required this.direction,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.textBaseline,
    List<Widget> children = const <Widget>[],
  }) 

Flex中的接口屬性和上篇中Row和Column幾乎一樣.

Expanded

Expanded可以按比例伸縮子Widget所占的空間:

const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
  }) 

????????屬性flex是彈性系數,如果flex=0或者=null,則子Widget沒有彈性系數,如果flex大于0,則子Widget按照比例來分割主軸剩余的空間:

Column(
        mainAxisAlignment: isClick ? MainAxisAlignment.center : MainAxisAlignment.start,
        crossAxisAlignment: isClick? CrossAxisAlignment.end : CrossAxisAlignment.start,
        children: <Widget>[
          Flex(
            direction: Axis.horizontal,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(
                  height: 50.0,
                  color: Colors.red,
                ),
              ),

              Expanded(
                flex: 4,
                child: Container(
                  height: 80,
                  color: Colors.green,
                ),
              ),
            ],
          ),

          Padding(
            padding: const EdgeInsets.only(top: 30.0),
            child: SizedBox(
              height: 100.0,
              child: Flex(
                direction: Axis.vertical,
                children: <Widget>[
                  Expanded(
                    flex: 2,
                    child: Container(
                      height: 60,
                      color: Colors.orange,
                    ),
                  ),
                  Spacer(
                    flex: 1,
                  ),
                  Expanded(
                    flex: 2,
                    child: Container(
                      height: 80,
                      color: Colors.purple,
                    ),
                  ),
                ],
              ),
            ),
          ),

          Text("Flutter 1",
            style: TextStyle(
              color: Colors.blueGrey,
              backgroundColor: Colors.cyan,
              fontSize: 20,
            ),
          ),

          RaisedButton(
            child: Text("RaisedButton 1",
              style: TextStyle(fontSize: 25),
            ),
            onPressed: buttonAction,
          ),

          Text("Flutter 2",
            style: TextStyle(
              fontSize: 20,
              color: Colors.green,
              backgroundColor: Colors.yellow,
            ),
          ),
        ],
      ),