布局类组件相关
布局类组件都会包含一个或多个子组件，不同的布局类组件对子组件排版(layout)方式不同。Element树是通过Widget树来创建的（通过Widget.createElement()），Widget其实就是Element的配置数据。在Flutter中，根据Widget是否需要包含子节点将Widget分为了三类，分别对应三种Element，如下表:
StatelessWidget和StatefulWidget就是两个用于组合Widget的基类，它们本身并不关联最终的渲染对象（RenderObjectWidget）。
最终渲染操作是在build()方法中构建真正的RenderObjectWidget，如Text，它其实是继承自StatelessWidget，然后在build()方法中通过RichText来构建其子树，而RichText才是继承自LeafRenderObjectWidget。
实战
具体效果如下：
相关源码如下：
class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( physics: AlwaysScrollableScrollPhysics(), shrinkWrap: true, children: <Widget>[ _swipe(), _checkWidget(), ], ); } // 头部轮播控件相关代码 Widget _swipe() { return Container( height: 180, // 设置轮播控件高度 child: Swiper( // 轮播控件 itemBuilder: (BuildContext context, int index) { return InkWell( onTap: () {}, child: Image.network( "https://sr.aihuishou.com/cms/image/63689137818430153041559824.png", fit: BoxFit.fill, ), ); }, itemCount: 3, pagination: SwiperPagination( // 轮播控件底部数字 alignment: Alignment.bottomRight, builder: FractionPaginationBuilder( fontSize: 20, color: Colors.white, activeFontSize: 20, activeColor: Colors.white)), autoplay: true, ), ); } // 审核管理相关 Widget _checkWidget() { return Container( margin: EdgeInsets.only(left: 10, right: 10), child: Column( // 纵向布局 children: <Widget>[ Container( margin: EdgeInsets.only(top: 20), 设置上边距 child: Row( // 横向布局 crossAxisAlignment: CrossAxisAlignment.center, // 主轴对其方式，再此处为横向布局方式 mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text( "审核管理", style: TextStyle(color: Colors.black, fontSize: 16), ), Row( children: <Widget>[ Text( "全部", style: TextStyle(color: Colors.black54, fontSize: 12), ), Icon( Icons.keyboard_arrow_right, color: Colors.grey, ) ], ) ], ), ), Container( margin: EdgeInsets.only(top: 10, bottom: 10), padding: EdgeInsets.fromLTRB(10, 15, 10, 15), decoration: BoxDecoration( // 审核管理下面的白色边框设置 color: Colors.white, borderRadius: BorderRadius.all( Radius.circular(5), // 设置边框圆角 ), ), child: Row( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ // 审核中 Expanded( flex: 1, // 设置权重为1 child: Row( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Container( child: Stack( children: <Widget>[ Container( child: Icon( Icons.book, color: Colors.redAccent[100], size: 42, ), width: 35, height: 40, alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.circular(50)), margin: EdgeInsets.only(top: 2, bottom: 2), ), Positioned( right: 0, top: 0, child: Container( padding: EdgeInsets.fromLTRB(3, 1, 3, 1), child: Text( "4", style: TextStyle( color: Colors.white, fontSize: 10, ), ), decoration: BoxDecoration( color: Colors.redAccent, borderRadius: BorderRadius.circular(20), ), )) ], ), color: Colors.black12, ), Container( margin: EdgeInsets.only(left: 10), child: Text( "审核中", style: TextStyle( color: Colors.black87, fontSize: 14, fontWeight: FontWeight.bold), ), ), ], ), ), // 审核完成 Expanded( flex: 1, // 设置权重为1 child: Row( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Container( child: Stack( children: <Widget>[ Container( child: Icon( Icons.book, color: Colors.redAccent[100], size: 42, ), width: 35, height: 40, alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.circular(50)), margin: EdgeInsets.only(top: 4, bottom: 4), ), Positioned( right: 10, top: 0, child: Container( padding: EdgeInsets.fromLTRB(3, 1, 3, 1), child: Text( "2", style: TextStyle( color: Colors.white, fontSize: 10, ), ), decoration: BoxDecoration( color: Colors.redAccent, borderRadius: BorderRadius.circular(20), ), )) ], ), width: 50, ), Container( margin: EdgeInsets.only(left: 10), child: Text( "审核完成", style: TextStyle( color: Colors.black87, fontSize: 14, fontWeight: FontWeight.bold), ), ), ], ), ), ], ), ), ], ), ); }
