上周日出去玩了，因而没工夫写文章。我司加班到 11 点，第二天能够早晨班一个小时，加班到 12 点，能够早晨班两个小时，以此类推，为什么说这个，对的，加班第二天我没有多睡觉，而是起来抓紧时间写文章，好了，废话不多说，进入明天的主题。
布局
说到 Android 布局，不是很难，会在对应的 xml 里布局，Flutter 里没有 xml，都在代码里写，给人感觉就很难，看下咱们要实现的布局：
关上 PhotoShop，看下背景色 #ededed，日期字体色彩 #a6a6a6，题目字体色彩 #1b1b1b，摘要字体色彩 #808080。
公众号这是列表，我先将 item 搞定。看这布局都是线性布局，这要在之前，分分钟搞定，但 Flutter……好吧，Flutter 布局可没那么简略，我花了好几个小时才做好，期间遇到了不少艰难。
Flutter 也有横向 Row 布局和竖向 Column 布局，我本想分 1 和 2 两个局部，最外层竖向 Column 蕴含 1 和 2，2 自身是 Column，蕴含一个 image 和两个 text，间接应用 Column 能够实现，当我须要设置 2 外面红色的背景色，发现 Column 基本没有背景色属性，于是把 2 最外层革新成 Container。
应用 Container 没有问题，布局也很快实现了，接下来是实现四角的圆角成果。
Container 有 decoration，能够实现圆角，我遇到了两个问题：
1、当 shape: BoxShape.circle 时不能设置 borderRadius ，会异样
异样信息：'shape != BoxShape.circle ||borderRadius == null': is not true.
2、应用 BoxDecoration
Container 不能应用 color，会报错：
Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)".
认为这样就实现了圆角，不，不会那么顺利的，发现图片基本没有圆角成果，这和之前 Java 实现形式不一样，最外层都实现了圆角，对外面的布局（图片）竟然没有失效，最初只好把布局实现如下：
分成 1、2、3 局部，3 还是 Container，2 和 3 圆角成果只对高低局部别离实现，残缺代码如下：
blogItem() { var date = new Padding( padding: const EdgeInsets.only( top: 20.0, left: 10.0, right: 10.0, ), child: new Text( '2020年6月28日 22:49', textAlign: TextAlign.center, style: TextStyle(color: ColorCommon.dateColor, fontSize: 18), )); var cover = new Padding( padding: const EdgeInsets.only( top: 10.0, left: 10.0, right: 10.0, ), child: new ClipRRect( borderRadius: BorderRadius.only( topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0)), child: new Image.network( 'http://pic1.win4000.com/wallpaper/2020-04-21/5e9e676001e20.jpg', ))); var title = new Text( 'APP 开发从 0 到 1（一）需要与筹备', style: TextStyle(color: ColorCommon.titleColor, fontSize: 22), ); var summary = new Padding( padding: const EdgeInsets.only( top: 5.0, ), child: new Text('一个人做一个我的项目，你也能够。', textAlign: TextAlign.left, style: TextStyle(color: ColorCommon.summaryColor, fontSize: 18))); var titleSummary = new Container( padding: const EdgeInsets.all(10.0), alignment: Alignment.topLeft, decoration: new BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only( bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0)), shape: BoxShape.rectangle, ), margin: const EdgeInsets.only(left: 10, right: 10.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: <Widget>[title, summary], ), ); var blogItem = new Column( children: <Widget>[date, cover, titleSummary, date, cover, titleSummary], ); return blogItem; }实际效果如下：
好了，对于 Flutter 布局就讲到这里，我只是针对这个我的项目所须要的去实现，Flutter 布局的货色还有很多，其属性让人眼花撩乱，能够去官网一个个去认真学习和实际。
ListView
blogItem 写好了，实现了大头，接下来就要填充实在的数据，在《APP 开发从 0 到 1（二）框架与网络》，有说到网络申请，其中有提到 setstate(){} 办法，调用这个办法会回调 build 办法，这样咱们能够在 build 办法加个判断，先加载 Progress，待网络数据申请完，再显示 ListView，代码如下：
@override Widget build(BuildContext context) { var content; if (blogList.isEmpty) { content = new Center( // 可选参数 child: child: new CircularProgressIndicator(), ); } else { content = new ListView(children: blogItem()); } return Scaffold( backgroundColor: ColorCommon.backgroundColor, appBar: AppBar( title: Text('AndBlog'), ), body: content, floatingActionButton: FloatingActionButton( tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); }blogItem() { List<Widget> widgets = []; for (int i = 0; i < blogList.length; i++) { Blog blog = blogList[i]; var date = new Padding( padding: const EdgeInsets.only( top: 20.0, left: 10.0, right: 10.0, ), child: new Text( // 填充实在数据 blog.date, textAlign: TextAlign.center, style: TextStyle(color: ColorCommon.dateColor, fontSize: 18), )); //…… var blogItem = new Column( children: <Widget>[ date, cover, titleSummary, ], ); widgets.add(blogItem); } return widgets; }这样 ListView 也实现了，接下来须要实现的是 ListView 加载更多。