Flutter 初探(三)：容器类Widgets
2019-04-20 本文已影响5人
若数
https://unsplash.com/photos/PO8Woh4YBD8
学习内容
以下是容器类Widgets的部分汇总：
- Padding
- 布局限制类容器ConstrainedBox和SizedBox
- 装饰类容器DecoratedBox
- 变换Transform
- Container容器
- Scaffold、底部导航
各个容器简易实现
// Padding
class 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: <Widget>[
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: <Widget>[
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",
style: TextStyle(color: Colors.white),
),
)),
);
}
}
class NewTransformAndContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(title: Text("Transform学习")),
body: new Column(
children: <Widget>[
Container(
color: Colors.black,
child: new Transform(
alignment: Alignment.topRight,
transform: new Matrix4.skewY(0.3),
child: new Container(
padding: const EdgeInsets.all(8.0),
color: Colors.deepOrange,
child: const Text("Apartment for rent!"),
),
),
),
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: Transform.translate(
offset: Offset(-20.0, -5.0),
child: Text("Hello world"),
)),
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: Transform.rotate(
//旋转90度
angle: math.pi / 2,
child: Text("Hello world"),
),
),
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: Transform.scale(
scale: 1.5, //放大到1.5倍
child: Text("Hello world"))),
Container(
margin: EdgeInsets.all(20.0), //容器外补白
color: Colors.orange,
child: Text("Hello world!"),
),
Container(
padding: EdgeInsets.all(20.0), //容器内补白
color: Colors.orange,
child: Text("Hello world!"),
),
Padding(
padding: EdgeInsets.all(20.0),
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.orange),
child: Text("Hello world!"),
),
),
DecoratedBox(
decoration: BoxDecoration(color: Colors.orange),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("Hello world!"),
),
),
Container(
margin: EdgeInsets.only(top: 50.0, left: 120.0), //容器外补白
constraints:
BoxConstraints.tightFor(width: 200.0, height: 150.0), //卡片大小
decoration: BoxDecoration(
//背景装饰
gradient: RadialGradient(
//背景径向渐变
colors: [Colors.red, Colors.orange],
center: Alignment.topLeft,
radius: .98),
boxShadow: [
//卡片阴影
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0)
]),
transform: Matrix4.rotationZ(.2), //卡片倾斜变换
alignment: Alignment.center, //卡片内文字居中
child: Text(
//卡片文字
"5.20", style: TextStyle(color: Colors.white, fontSize: 40.0),
),
),
],
));
}
}
// Scaffold、TabBar、底部导航
class ScaffoldRoute extends StatefulWidget {
@override
_ScaffoldRouteState createState() => new _ScaffoldRouteState();
}
class _ScaffoldRouteState extends State<ScaffoldRoute> {
int _selectedIndex = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//导航栏
title: Text("App Name"),
// 手动设置leading自定义菜单图标
// leading: Builder(builder: (context){
// return IconButton(icon: Icon(Icons.dashboard), color: Colors.white,
// onPressed: (){
// Scaffold.of(context).openDrawer();
// },
// );
// },),
actions: <Widget>[
//导航栏右侧菜单
IconButton(icon: Icon(Icons.share), onPressed: () {}),
],
),
// drawer: new MyDrawer(), //抽屉
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('home')),
BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('business')),
BottomNavigationBarItem(icon: Icon(Icons.school), title: Text("school")),
],
currentIndex: _selectedIndex,
fixedColor: Colors.blue,
onTap: _onItemTapped,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.ac_unit),
onPressed: _onAdd,
),
);
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
void _onAdd() {}
}
以下是一些效果截图：
111F92E0175C9AFB661F0ECCDF2F3E17.png
1759C00538F90D7216B29045B17F40BC.png
A122F93A547B1FDCDC894E652E0107FB.png
C091574D22BB5F75B439E101814B4D0A.png
EB787B6E31F19CC4DDFA95A077D73629.png
Summary
容器类愈加抽象，但是给布局和各种酷炫实现打下了坚实的基础和广阔的想象力，是个诱惑而充满挑战的体验。
