![5f7ec18d8fb03bc7cfb2e0b0dca9782f.png](https://i-blog.csdnimg.cn/blog_migrate/64e2824dae5e2b92ac99f18bd41296fe.jpeg)
学习内容
以下是容器类Widgets的部分汇总:
- Padding
- 布局限制类容器ConstrainedBox和SizedBox
- 装饰类容器DecoratedBox
- 变换Transform
- Container容器
- Scaffold、底部导航
各个容器简易实现
// Paddingclass NewPadding extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar(title: Text('Padding学习')), body: new Padding( // 上下左右各添加16像素空白 padding: EdgeInsets.all(16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( // 左边添加8像素补白 padding: const EdgeInsets.only(left: 8.0), child: Text('Hello world'), ), Padding( //上下各添加8像素补白 padding: const EdgeInsets.symmetric(vertical: 8.0), child: Text("I am Jack"), ), Padding( // 分别指定四个方向的补白 padding: const EdgeInsets.fromLTRB(20.0, .0, 20.0, 20.0), child: Text("Your friend"), ) ], )), ); }}// 布局限制类容器 ConstrianedBox、SizeBox// 预先定义一个redBox,一个红色背景的盒子Widget redBox = DecoratedBox( decoration: BoxDecoration(color: Colors.red),);class NewConstrainedBox extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar(title: Text("ConstrianedBox、SizeBox学习")), body: new Column( children: [ new Text('ConstrainedBox:'), new ConstrainedBox( // 最小高度50,宽度尽可能大的红色容器 constraints: BoxConstraints(minWidth: double.infinity, minHeight: 50.0), // 虽然container高度为5但是,容器的最小高度为50,所以最终生效的是50 child: Container(height: 5.0, child: redBox), ), // SizedBox用于给子Widget指定固定的宽高 new Text('SizedBox:'), SizedBox( width: 80.0, height: 80.0, child: redBox, ), new Text('多重限制案例:'), // 多重限制案例 ConstrainedBox( // 父 constraints: BoxConstraints(minWidth: 60.0, minHeight: 60.0), child: ConstrainedBox( constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0), child: redBox, )), new Text('调换限制条件:'), ConstrainedBox( // 父 constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0), child: ConstrainedBox( constraints: BoxConstraints(minWidth: 60.0, minHeight: 60.0), child: redBox, )), new Text("'去除'多重限制"), ConstrainedBox( constraints: BoxConstraints(minWidth: 60, minHeight: 100), child: UnconstrainedBox( child: ConstrainedBox( constraints: BoxConstraints(minWidth: 90, minHeight: 20), child: redBox, ), ), ), ], )); }}// 装饰容器DecoratedBox 漂亮警告class NewDecoratedBox extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar(title: Text('NewDecoratedBox学习')), body: new DecoratedBox( decoration: BoxDecoration( // 背景渐变 gradient: LinearGradient(colors: [Colors.red, Colors.orange[700]]), // 像素圆角 borderRadius: BorderRadius.circular(3.0), boxShadow: [ BoxShadow( color: Colors.black54, offset: Offset(2.0, 2.0), blurRadius: 4.0), ], ), child: new Padding( padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0), child: Text( "Login