Flutter布局实践

效果图

效果图

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
class MyPage extends StatelessWidget {
  MyPage({Key? key}) : super(key: key);
  Widget titleSection = Container(//自定义组件，标题部分，即头部部分
    padding: const EdgeInsets.all(32),
    child: Row(//一行
      children: [//三列
        Expanded(//第一列，标题和副标题
          child: Column(//第一列有两行
            crossAxisAlignment: CrossAxisAlignment.start,//交叉轴方向，此处即水平方向对齐方式，在起点处对齐，即左对齐
            children: [
              const Text(//第一行
                "Hello,this is Alice!",
                style: TextStyle(
                  fontWeight: FontWeight.bold,//加粗，表明主体
                ),
              ),
              Text(//第二行
                "Good evening!",
                style: TextStyle(
                  color: Colors.grey[500],//灰色
                ),
              )
            ],
          ),
        ),
        const Icon(//第二列，收藏图标
          Icons.star,
          color: Colors.red,
        ),
        const Text(//第三列，收藏数
          "520",
        )
      ],
    ),
  );
  Widget options=Container(//自定义组件，操作栏部分
    margin: const EdgeInsets.only(top: 10),
    child: Row(//一行三列
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [//三列
        Column(//第一列，图标加文字描述，下同
          children: const [
            Icon(
              Icons.call,
              color: Colors.blue,
            ),
            Text(
              "CALL",
              style: TextStyle(
                color: Colors.blue,
              ),
            )
          ],
        ),
        Column(//第二列
          children: const [
            Icon(
              Icons.route,
              color: Colors.blue,
            ),
            Text(
              "ROUTE",
              style: TextStyle(
                color: Colors.blue,
              ),
            )
          ],
        ),
        Column(//第三列
          children: const [
            Icon(
              Icons.share,
              color: Colors.blue,
            ),
            Text(
              "SHARE",
              style: TextStyle(
                color: Colors.blue,
              ),
            )
          ],
        ),
      ],
    ),
  );
  Widget text=Container(//自定义组件，文本区域部分
    margin: const EdgeInsets.only(top: 10),
    padding: const EdgeInsets.all(30),//内边距30，即四周留空
    child: const Text(
      "Something exciting happened when I got up this day. Maybe, but I am not sure about the time."
    ),
  );
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.asset(//预设图片
          'images/Alice.jpg',
          // width: 100,
          height: 300,
          fit: BoxFit.cover,//填充方式，覆盖。
        ),
        titleSection,
        options,
        text
      ],
    ) ;
  }
}

总结

  • Flutter 的布局用熟悉了感觉很舒服
  • 使用预设图片需要存放在项目的images文件夹中，然后在 pubsepc.yaml 中进行相关的设置。最后在代码中用Image.asset进行引用
  • 布局前要好好思考才是