1 Container

aligment:子部件对齐的位置 — Alignment(x,y),x,y取值-1~1
color：背景颜色
constraints：BoxConstraints
padding (内边距)
margin (外边距)
decoration：BoxDecoration
可用于设置：背景图的渐变，边框，圆角 ，阴影
transform:旋转

Container的使用

  1. @override
  3.   Widget build(BuildContext context) {
  5.     return Container(
  7.       color: Colors.grey[100] ,//背景颜色
  9.       child: Row(
  11.         children: <Widget>[
  13.           Container(
  15.             child: Icon(Icons.pool, size:32.0, color:Colors.white),
  17.             color: Color.fromRGBO(3, 53, 255, 1.0),
  19.             padding: EdgeInsets.only(left: 24.0,right: 8.0),//内边距
  21.             margin: EdgeInsets.all(8.0),//外边距
  23.             width: 90.0,//宽度
  25.             height: 90.0,//高度
  27.           ),
  29.         ],
  31.       ),
  33.     );
  35.   }

Decoration的使用

  1. Widget build(BuildContext context) {
  3.     return Container(
  5.       // color: Colors.grey[100] ,//背景颜色
  7.       decoration: BoxDecoration(
  9.         image: DecorationImage(//背景图片 ,不能与背景色同时使用
  11.           image: NetworkImage('https://resources.ninghao.org/images/say-hello-to-barry.jpg'),
  13.           alignment: Alignment.topCenter,
  15.           repeat: ImageRepeat.repeatY,//是否重复
  17.           fit: BoxFit.cover,//填充模式
  19.           colorFilter: ColorFilter.mode(//颜色滤镜
  21.             Colors.indigoAccent[400].withOpacity(0.5),
  23.             BlendMode.hardLight//混合模式
  25.             ),
  27.         ),
  29.       ),
  31.       child: Row(
  33.         mainAxisAlignment: MainAxisAlignment.center,//主轴对齐方式,显示居中
  35.         children: <Widget>[
  37.           Container(
  39.             child: Icon(Icons.pool, size:32.0, color:Colors.white),
  41.             padding: EdgeInsets.only(left: 24.0,right: 8.0),//内边距
  43.             margin: EdgeInsets.all(8.0),//外边距
  45.             width: 90.0,//宽度
  47.             height: 90.0,//高度
  49.             decoration: BoxDecoration(
  51.               color: Color.fromRGBO(3, 53, 255, 1.0),//这里添加背景设置的话,尚层Container不能设置color
  53.               border: Border.all(
  55.                 color: Colors.indigoAccent[100],
  57.                 width: 3.0,
  59.                 style: BorderStyle.solid,
  61.               ),
  63.               // border: Border(//边框 这里也可以用Border.all()设置四边款统一样式
  65.               // top: BorderSide(
  67.               //  color: Colors.indigoAccent[100],
  69.               //  width: 3.0,
  71.               //  style: BorderStyle.solid,
  73.               // ),
  75.               // bottom: BorderSide(
  77.               //  color: Colors.red[300],
  79.               //  width: 3.0,
  81.               //  style: BorderStyle.solid,
  83.               // ),
  85.               //  left: BorderSide(
  87.               //  color: Colors.indigoAccent[200],
  89.               //  width: 3.0,
  91.               //  style: BorderStyle.solid,
  93.               // ),
  95.               //  right: BorderSide(
  97.               //  color: Colors.indigoAccent[200],
  99.               //  width: 3.0,
  101.               //  style: BorderStyle.solid,
  103.               // ),
  105.               // ),
  107.               // borderRadius: BorderRadius.circular(16.0),//边框圆角 BorderRadius.only(topLeft:16)
  109.               boxShadow: [//阴影效果
  111.                 BoxShadow(
  113.                   offset: Offset(0, 16.0),//阴影在X轴和Y轴上的偏移
  115.                   color: Color.fromRGBO(16, 20, 188, 10),//阴影颜色
  117.                   blurRadius: 25.0 ,//阴影程度
  119.                   spreadRadius: -9.0, //阴影扩散的程度 取值可以正数,也可以是负数
  121.                 ),
  123.               ],
  125.               shape: BoxShape.circle,//装饰器的形状 如果设置成圆形,不能设置borderRadius
  127.               //  gradient: RadialGradient( //径向渐变效果RadialGradient  线性渐变效果LinearGradient
  129.               //  colors: [
  131.               //    Color.fromRGBO(7, 102, 255, 1.0),
  133.               //    Color.fromRGBO(3, 28, 128, 1.0),
  135.               //  ]
  137.               gradient: LinearGradient( //径向渐变效果RadialGradient  线性渐变效果LinearGradient
  139.                 colors: [
  141.                   Color.fromRGBO(7, 102, 255, 1.0),
  143.                   Color.fromRGBO(3, 28, 128, 1.0),
  145.                 ],
  147.                 begin: Alignment.topCenter,
  149.                 end : Alignment.bottomCenter,
  151.               ),
  153.             ),
  155.           ),
  157.         ],
  159.       ),
  161.     );
  163.   }

背景图

  1.  Container(
  2.       // color: Colors.grey[100] ,//背景颜色
  3.       decoration: BoxDecoration(
  4.         image: DecorationImage(//背景图片 ,不能与背景色同时使用
  5.           image: NetworkImage('https://resources.ninghao.org/images/say-hello-to-barry.jpg'),
  6.           alignment: Alignment.topCenter,
  7.           repeat: ImageRepeat.repeatY,//是否重复
  8.           fit: BoxFit.cover,//填充模式
  9.           colorFilter: ColorFilter.mode(//颜色滤镜
  10.             Colors.indigoAccent[400].withOpacity(0.5), 
  11.             BlendMode.hardLight//混合模式
  12.             ),
  13.         ),
  14.       ),
  15. )

阴影和渐变

  1.  Container(
  2.             child: Icon(Icons.pool, size:32.0, color:Colors.white),
  3.             padding: EdgeInsets.only(left: 24.0,right: 8.0),//内边距
  4.             margin: EdgeInsets.all(8.0),//外边距
  5.             width: 90.0,//宽度
  6.             height: 90.0,//高度
  7.             decoration: BoxDecoration(
  8.               color: Color.fromRGBO(3, 53, 255, 1.0),//这里添加背景设置的话,尚层Container不能设置color
  9.               border: Border.all(
  10.                 color: Colors.indigoAccent[100],
  11.                 width: 3.0,
  12.                 style: BorderStyle.solid,
  13.               ),
  15.               // borderRadius: BorderRadius.circular(16.0),//边框圆角 BorderRadius.only(topLeft:16)
  16.               boxShadow: [//阴影效果
  17.                 BoxShadow(
  18.                   offset: Offset(0, 16.0),//阴影在X轴和Y轴上的偏移
  19.                   color: Color.fromRGBO(16, 20, 188, 10),//阴影颜色
  20.                   blurRadius: 25.0 ,//阴影程度
  21.                   spreadRadius: -9.0, //阴影扩散的程度 取值可以正数,也可以是负数
  22.                 ),
  23.               ],
  24.               shape: BoxShape.circle,//装饰器的形状 如果设置成圆形,不能设置borderRadius
  25.               //  gradient: RadialGradient( //径向渐变效果RadialGradient   线性渐变效果LinearGradient
  26.               //   colors: [
  27.               //     Color.fromRGBO(7, 102, 255, 1.0),
  28.               //     Color.fromRGBO(3, 28, 128, 1.0),
  29.               //   ]
  30.               gradient: LinearGradient( //径向渐变效果RadialGradient   线性渐变效果LinearGradient
  31.                 colors: [
  32.                   Color.fromRGBO(7, 102, 255, 1.0),
  33.                   Color.fromRGBO(3, 28, 128, 1.0),
  34.                 ],
  35.                 begin: Alignment.topCenter,
  36.                 end : Alignment.bottomCenter,
  37.               ),
  38.             ),
  39.           )

边框和圆角

  1. Container(
  2.           child: Icon(Icons.pool, size:32.0, color:Colors.white),
  3.           padding: EdgeInsets.only(left: 24.0,right: 8.0),//内边距
  4.           margin: EdgeInsets.all(8.0),//外边距
  5.           width: 90.0,//宽度
  6.           height: 90.0,//高度
  7.           decoration: BoxDecoration(
  8.             color: Color.fromRGBO(3, 53, 255, 1.0),//这里添加背景设置的话,尚层Container不能设置color
  9.             border: Border(//边框 这里也可以用Border.all()设置四边款统一样式
  10.             top: BorderSide(
  11.               color: Colors.indigoAccent[100],
  12.               width: 3.0,
  13.               style: BorderStyle.solid,
  14.               ),
  15.               bottom: BorderSide(
  16.                 color: Colors.red[300],
  17.                 width: 3.0,
  18.                 style: BorderStyle.solid,
  19.                 ),
  20.               left: BorderSide(
  21.                 color: Colors.indigoAccent[200],
  22.                 width: 3.0,
  23.                 style: BorderStyle.solid,
  24.                 ),
  25.               right: BorderSide(
  26.                 color: Colors.indigoAccent[200],
  27.                 width: 3.0,
  28.                 style: BorderStyle.solid,
  29.                 ),
  30.               ),
  31.               borderRadius: BorderRadius.circular(16.0),//边框圆角 BorderRadius.only(topLeft:16)
  32.             ),
  33.         ),

2 Scaffold

可设置的属性：
AppBar
body
bottomNavigationBar:BottomNavigationBar
floatingActionButton
drawer
endDrawer
…

  1. class ScaffoldRoute extends StatefulWidget {
  2.   @override
  3.   _ScaffoldRouteState createState() => _ScaffoldRouteState();
  4. }
  6. class _ScaffoldRouteState extends State<ScaffoldRoute> {
  7.   int _selectedIndex = 1;
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return Scaffold(
  12.       appBar: AppBar( //导航栏
  13.         title: Text("App Name"), 
  14.         actions: <Widget>[ //导航栏右侧菜单
  15.           IconButton(icon: Icon(Icons.share), onPressed: () {}),
  16.         ],
  17.       ),
  18.       drawer: new MyDrawer(), //抽屉
  19.       bottomNavigationBar: BottomNavigationBar( // 底部导航
  20.         items: <BottomNavigationBarItem>[
  21.           BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
  22.           BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
  23.           BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
  24.         ],
  25.         currentIndex: _selectedIndex,
  26.         fixedColor: Colors.blue,
  27.         onTap: _onItemTapped,
  28.       ),
  29.       floatingActionButton: FloatingActionButton( //悬浮按钮
  30.           child: Icon(Icons.add),
  31.           onPressed:_onAdd
  32.       ),
  33.     );
  34.   }
  35.   void _onItemTapped(int index) {
  36.     setState(() {
  37.       _selectedIndex = index;
  38.     });
  39.   }
  40.   void _onAdd(){
  41.   }
  42. }

3 AppBar

  1. AppBar({
  2.   Key key,
  3.   this.leading, //导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮。
  4.   this.automaticallyImplyLeading = true, //如果leading为null，是否自动实现默认的leading按钮
  5.   this.title,// 页面标题
  6.   this.actions, // 导航栏右侧菜单
  7.   this.bottom, // 导航栏底部菜单，通常为Tab按钮组
  8.   this.elevation = 4.0, // 导航栏阴影
  9.   this.centerTitle, //标题是否居中 
  10.   this.backgroundColor,
  11.   ...   //其它属性见源码注释
  12. })

4 Column (垂直布局) & Row (水平布局)

主轴属性设置mainAxisAlignment

  1. enum MainAxisAlignment {
  2.  //将子控件放在主轴的开始位置
  3.   start,  
  4.    //将子控件放在主轴的结束位置
  5.   end,
  6.   //将子控件放在主轴的中间位置
  7.   center,
  8.   //将主轴空白位置进行均分，排列子元素，手尾没有空隙
  9.   spaceBetween,
  10.   //将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件间距为中间子控件间距的一半
  11.   spaceAround,
  12.   //将主轴空白区域均分，使各个子控件间距相等
  13.   spaceEvenly,
  14. }

交叉轴 crossAxisAlignment

在Row（水平排列）控件中，CrossAxisAlignment的方向就是垂直的，在 Column（垂直排列）控件中，CrossAxisAlignment的方向就是水平的。

  1. enum CrossAxisAlignment {
  2.  //将子控件放在交叉轴的起始位置
  3.   start,
  5.  //将子控件放在交叉轴的结束位置
  6.   end,
  8.  //将子控件放在交叉轴的中间位置
  9.   center,
  11. //使子控件填满交叉轴
  12.   stretch,
  14. //将子控件放在交叉轴的上，并且与基线相匹配（不常用）
  15.   baseline,
  16. }

案例

  1. Column(
  2.   //测试Row对齐方式，排除Column默认居中对齐的干扰
  3.   crossAxisAlignment: CrossAxisAlignment.start,
  4.   children: <Widget>[
  5.     Row(
  6.       mainAxisAlignment: MainAxisAlignment.center,
  7.       children: <Widget>[
  8.         Text(" hello world "),
  9.         Text(" I am Jack "),
  10.       ],
  11.     ),
  12.     Row(
  13.       mainAxisSize: MainAxisSize.min,
  14.       mainAxisAlignment: MainAxisAlignment.center,
  15.       children: <Widget>[
  16.         Text(" hello world "),
  17.         Text(" I am Jack "),
  18.       ],
  19.     ),
  20.     Row(
  21.       mainAxisAlignment: MainAxisAlignment.end,
  22.       textDirection: TextDirection.rtl,
  23.       children: <Widget>[
  24.         Text(" hello world "),
  25.         Text(" I am Jack "),
  26.       ],
  27.     ),
  28.     Row(
  29.       crossAxisAlignment: CrossAxisAlignment.start,  
  30.       verticalDirection: VerticalDirection.up,
  31.       children: <Widget>[
  32.         Text(" hello world ", style: TextStyle(fontSize: 30.0),),
  33.         Text(" I am Jack "),
  34.       ],
  35.     ),
  36.   ],
  37. );

让里面的Row占满外部Row，可以使用Expanded 组件

  1. class RowDemo extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return Row(
  5.       mainAxisAlignment: MainAxisAlignment.start,
  6.       crossAxisAlignment: CrossAxisAlignment.baseline,
  7.       textBaseline: TextBaseline.ideographic,
  8.       //alphabetic  英文字符
  9.       //ideographic 中文字符
  10.       children: <Widget>[
  11.         Expanded(
  12.           child: Container(
  13.             height: 80,
  14.             color: Colors.white,
  15.             child: Text(
  16.               'hello',
  17.               style: TextStyle(fontSize: 15),
  18.             ),
  19.           ),
  20.         ),
  21.         Expanded(
  22.           child: Container(
  23.             height: 80,
  24.             color: Colors.blue,
  25.             child: Text(
  26.               '嘿嘿12312312',
  27.               style: TextStyle(fontSize: 30),
  28.             ),
  29.           ),
  30.         ),
  31.         Expanded(
  32.           child: Container(
  33.             height: 80,
  34.             color: Colors.red,
  35.             child: Text(
  36.               'heihei',
  37.               style: TextStyle(fontSize: 60),
  38.             ),
  39.           ),
  40.         ),
  41.       ],
  42.     );
  43.   }
  44. }

Row里面嵌套Row，或者Column里面再嵌套Column，那么只有最外面的Row或Column会占用尽可能大的空间，里面Row或Column所占用的空间为实际大小

6 Center ( 居中布局)

  1. class Center extends Align {
  2.   const Center({ Key key, double widthFactor, double heightFactor, Widget child })
  3.     : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
  4. }

Center继承自Align，比Align只少了一个alignment参数
相当于Align的构造函数中alignment值为Alignment.center

  1. DecoratedBox(
  2.   decoration: BoxDecoration(color: Colors.red),
  3.   child: Center(
  4.     child: Text("xxx"),
  5.   ),
  6. ),
  7. DecoratedBox(
  8.   decoration: BoxDecoration(color: Colors.red),
  9.   child: Center(
  10.     widthFactor: 1,
  11.     heightFactor: 1,
  12.     child: Text("xxx"),
  13.   ),
  14. )

image.png