flutter 页面布局及标签-入门篇

flutter布局有点难受（对于一个写了多年css的我来说是这样的），所以我会尽量把文章也写的详细一点，方便大家参考和快速上手。

1、页面头部设置

通过修改

 appBar: new AppBar(
          title: new Text('我是头部'),
        )

image.png

2、container使用

image.png

1.屏幕宽高获取：final oSize=window.physicalSize（oSize是我自己起的）
2.方式：宽-> oSize.width 高-> oSize.height
3.此container还包含了一个Text标签（最后一行就是）

3、row(横向布局)

WeChate3e374d27594ed4fab8c5b98de1a5acc.png

其中padding和margin设置方式有两种：

const EdgeInsets.all(8.0)(上下左右统一8.0)
margin: EdgeInsets.fromLTRB(5,0,0,0)(左上右下：5,0,0,0)

当不加new Center（center为上下左右居中） 时，你会发现样式变了：

WeChataf2a1ef30f0f1a0b4848915b7be9403f.png

4、column(竖向布局)

竖向布局跟横向差不多，只需要将最外层的body:Row改成body:Column，就可以了。

5、Image(本地引入、网络图片)

image.png

引入本地图片时，需先建立文件，并且在pubspec.yaml里面进行设置

image.png

图片圆角:下面有代码：

一般模式：

image.png

 Card(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadiusDirectional.circular(20)),
              clipBehavior: Clip.antiAlias,
              child: Image.asset(
                "images/1.jpg",
                width: double.maxFinite,
              ),
          ),

背景图模式：

image.png

    Container(
                decoration: ShapeDecoration(
                    image: DecorationImage(
                        image: AssetImage("images/1.jpg"),
                        fit: BoxFit.fitWidth),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadiusDirectional.circular(50))),
                width: oSize.width,
                height: 200,
                child: Align(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      "Container decoration实现圆角(radius = 20)",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                  alignment: Alignment.bottomCenter,
                ),
              )

6、listView使用

少量数据是直接这样使用就行

image.png

内容正在补充中