4 Flutter UI 布局组件

一 Padding 组件

该组件就是为了给Widget 加个边距

里面最重要的两个属性就是child 和  padding

以下是通过给图片加个padding 同时给gridView 加个paddig 实现如下效果的

body: Padding(
          padding: EdgeInsets.fromLTRB(0, 0, 10, 10),
          child: GridView.count(crossAxisCount: 2, children: [
            Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Image.network(
                    "https://www.itying.com/images/flutter/1.png",
                    fit: BoxFit.fill)),
            Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Image.network(
                    "https://www.itying.com/images/flutter/2.png",
                    fit: BoxFit.fill)),
            Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Image.network(
                    "https://www.itying.com/images/flutter/3.png",
                    fit: BoxFit.fill)),
            Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Image.network(
                    "https://www.itying.com/images/flutter/1.png",
                    fit: BoxFit.fill)),
            Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Image.network(
                    "https://www.itying.com/images/flutter/2.png",
                    fit: BoxFit.fill)),
          ]),
        ));

二 Row 水平布局组件

主轴的水平方向

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          height: 600,
          width: 400,
          color: Colors.cyan,
          child: Row(
            // 主轴的排列方式 center 居中  spaceAround 元素之间的距离是两边的两倍
            // spaceBetween 两边无距离 spaceEvenly 元素之间的距离和两边的距离相等
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            // 相当于 外层 纵向的排列方式
            // center 纵向居中 start 纵向位于顶部
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              IconContainer(Icons.search, size: 38, color: Colors.blue),
              IconContainer(Icons.home, size: 38, color: Colors.red),
              IconContainer(Icons.settings, size: 38, color: Colors.yellow)
            ],
          ),
        ));
  }
}

class IconContainer extends StatelessWidget {
  Color? color = Colors.red;
  double? size = 32.0;
  IconData icon;
  // 构造函数 设置可选参数
  IconContainer(this.icon, {this.size, this.color});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        color: this.color,
        height: 100,
        width: 100,
        child: Center(
          child: Icon(this.icon, size: this.size, color: Colors.white),
        ));
  }

三 Column 布局组件

方法基本与Row 一样，只是主轴变为纵向的方向

四 Expanded 组件

body: Row(
          children: [
            // 左侧自适应
            Expanded(
                flex: 1,
                child:
                    IconContainer(Icons.search, size: 38, color: Colors.blue)),
            // 右侧固定宽度
            IconContainer(Icons.home, size: 38, color: Colors.red),
          ],
        )

五 示例

    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            Container(
              color: Colors.cyan,
              height: 200,
              padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
            ),
            SizedBox(height: 10),
            Row(
              children: [
                Expanded(
                    flex: 2,
                    child: Container(
                        child: Image.network(
                            "https://www.itying.com/images/flutter/1.png",
                            fit: BoxFit.cover),
                        height: 180)),
                SizedBox(width: 10),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 180,
                    child: ListView(
                      children: [
                        Container(
                          height: 85,
                          child: Image.network(
                              "https://www.itying.com/images/flutter/1.png",
                              fit: BoxFit.cover),
                        ),
                        SizedBox(height: 10),
                        Container(
                          height: 85,
                          child: Image.network(
                              "https://www.itying.com/images/flutter/4.png",
                              fit: BoxFit.cover),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          ],
        ));