Flutter入門 - 佈局Widget

單佈局

Align

center == Align - alignment.center

Align(
      // alignment: Alignment.topCenter,
      // alignment: Alignment.center,
      alignment: Alignment(0, 0),
      child: Icon(
        Icons.pets,
        size: 50,
      ),
    );
複製代碼

Padding

實現間距問題有兩種實現方式：

1. 使用 Padding，child 包裹對象
2. 使用 Container, child 包裹對象，而且設置 padding 或者 margin

Padding(
            // padding: EdgeInsets.only(bottom: 5),
            // padding: EdgeInsets.all(5),
            // padding: EdgeInsets.fromLTRB(5, 5, 10, 10),
            padding: EdgeInsets.all(5),
            child: Text(
              "江山代有才人出",
              style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                  backgroundColor: Colors.black12),
            ),
          ),
複製代碼

Container

注意點：

color 衝突

• color 會與 decoration 的 color 衝突，若是使用 decoration 就把 Container 的 color 註釋

aligment 問題

• 若是 alignment 有的話才建立 align ，就變成 Container -> Align -> Text
• 若是沒有設置 alignment，默認會把 child（Text） 拉滿， 所以看起來 Text 並非中間對齊 Container -> Text
• alignment: Alignment.center, //child 對齊方式 （text 未對齊是由於未填充滿, 默認是 center ）

padding

child 內邊距

margin

外邊距

DEMO

class ContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // color: Colors.red, //背景顏色
      padding: EdgeInsets.all(20), // child 內邊距
      margin: EdgeInsets.all(5), //container 外邊距
      width: 200,
      height: 200,
      // 若是 alignment 有的話才建立 align ，就變成 Container -> Align -> Text
      // 若是沒有設置 alignment，默認會把 child（Text） 拉滿， 所以看起來 Text 並非中間對齊 Container -> Text
      // alignment: Alignment.center, //child 對齊方式 （text 未對齊是由於未填充滿, 默認是 center ）
      // 使用 裝飾 會和 color 屬性衝突，所以使用該對象就在該對象裏設置背景顏色
      decoration: BoxDecoration(
          color: Colors.red, //背景顏色
          border: Border.all(color: Colors.blue, width: 5), //邊框
          borderRadius: BorderRadius.circular(10), //圓角
          //陰影 是 list, 可添加多個陰影
          boxShadow: [
            BoxShadow(
              color: Colors.orange, //陰影顏色
              offset: Offset(10, 10), //陰影偏移
              spreadRadius: 5, //偏移增加（在offset基礎上）
              blurRadius: 10, //模糊度
            )
          ]),

      // child: Text("我是Joho"),
      child: Icon(
        Icons.pets,
        // size: 50,
        color: Colors.white,
      ),
    );
  }
}
複製代碼

多佈局

Flex

子類有 Row、Column, 經過設置 direction 區分

Row == direction: Axis.horizontal 
Column == direction: Axis.vertical
複製代碼

Row

相關屬性設置

• mainAxisAlignment: 主軸
• • start 默認 左邊
• • spaceBetween 默認是兩邊間距爲0，其他間距評分
• • spaceAround 兩邊間距是中間間距的一半
• • spaceEvenly 均分間距
• mainAxisSize:
• • max 默認是 max 即佔據一行的最大值 == container.width
• • min 去除全部間距
• crossAxisAlignment: 交叉軸
• • start 默認 頂部
• • center 交叉軸中點
• • strench 將交叉軸拉到最大 == container.height

DEMO

class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      //默認是start，即左邊
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
          color: Colors.red,
          width: 60,
          height: 50,
        ),
        Container(
          color: Colors.blue,
          width: 80,
          height: 100,
        ),
        Container(
          color: Colors.purple,
          width: 40,
          height: 90,
        ),
        Container(
          color: Colors.orange,
          width: 90,
          height: 120,
        ),
      ],
    );
  }
}

複製代碼

Flexible

經常使用屬性

• fit 都設置爲 FlexFit.tight 時，寬度就失效了(所以使用 Expanded 寬度失效)
• 寬度爲 flex 的比例

Flexible(
    flex: 1,
    fit: FlexFit.tight,
    child: Container(
	color: Colors.green,
	width: 10,
        height: 120,
    ),
),
複製代碼

Expanded

• Expanded 繼承自 Flexible
• Expanded == FlexFit.tight
• Expanded 用的比較多

Expanded(
    flex: 1,
    child: Container(
    color: Colors.black,
    width: 100,
    height: 150,
)),
複製代碼

Stack Positioned 絕對定位

Demo

class StackWidget extends StatefulWidget {
  @override
  _StackWidgetState createState() => _StackWidgetState();
}

class _StackWidgetState extends State<StackWidget> {
  bool _isfavor = false;
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            border: Border.all(color: Colors.blue, width: 5), //邊框
          ),
          child: Image.asset(
            "images/baidu.png",
            width: double.infinity,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
            bottom: 0,
            right: 0,
            left: 0,
            child: Container(
              color: Colors.black26,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "Joho",
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  ),
                  IconButton(
                      icon: Icon(
                        Icons.favorite,
                        color: _isfavor ? Colors.red : Colors.white,
                      ),
                      onPressed: () {
                        setState(() {
                          _isfavor = !_isfavor;
                        });
                      })
                ],
              ),
            ))
      ],
    );
  }
}

複製代碼