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

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

1、页面头部设置

通过修改

 appBar: new AppBar(
          title: new Text('我是头部'),
        )
flutter 页面布局及标签-入门篇_第1张图片
image.png
2、container使用

flutter 页面布局及标签-入门篇_第2张图片
image.png

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

3、row(横向布局)
flutter 页面布局及标签-入门篇_第3张图片
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为上下左右居中) 时,你会发现样式变了:
flutter 页面布局及标签-入门篇_第4张图片
WeChataf2a1ef30f0f1a0b4848915b7be9403f.png
4、column(竖向布局)

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

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

flutter 页面布局及标签-入门篇_第5张图片
image.png

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

flutter 页面布局及标签-入门篇_第6张图片
image.png

图片圆角:下面有代码:

一般模式:
flutter 页面布局及标签-入门篇_第7张图片
image.png
 Card(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadiusDirectional.circular(20)),
              clipBehavior: Clip.antiAlias,
              child: Image.asset(
                "images/1.jpg",
                width: double.maxFinite,
              ),
          ),
背景图模式:
flutter 页面布局及标签-入门篇_第8张图片
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使用
少量数据是直接这样使用就行
flutter 页面布局及标签-入门篇_第9张图片
image.png

内容正在补充中

你可能感兴趣的:(flutter 页面布局及标签-入门篇)