Flutter入门（二）
- 2019 年 12 月 27 日
- 筆記
* 网格布局
class HomeContent extends StatelessWidget { List<Widget> _getListData() { var tempList = listData.map((value) { return Container( child: Column( children: <Widget>[ Image.network(value['imageUrl']), SizedBox( height: 10, ), Text( value['title'], textAlign: TextAlign.center, style: TextStyle(fontSize: 20), ), ], ), decoration: BoxDecoration( border: Border.all( color: Colors.yellow, width: 1, )), ); }); return tempList.toList(); } @override Widget build(BuildContext context) { // TODO: implement build return GridView.count( crossAxisSpacing: 20.0, //水平子Widget之间间距 mainAxisSpacing: 20.0, //垂直子Widget之间间距 padding: EdgeInsets.all(10), crossAxisCount: 2, //一行的Widget数量 // childAspectRatio: 0.7, //宽度和高度的比例 children: this._getListData(), ); } }
效果图
优化
class HomeContent extends StatelessWidget { Widget _getListData(context, index) { return Container( child: Column( children: <Widget>[ Image.network(listData[index]['imageUrl']), SizedBox( height: 10, ), Text( listData[index]['title'], textAlign: TextAlign.center, style: TextStyle(fontSize: 20), ), ], ), decoration: BoxDecoration( border: Border.all( color: Colors.yellow, width: 1, )), ); } @override Widget build(BuildContext context) { return GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisSpacing: 10.0, //水平子Widget之间间距 mainAxisSpacing: 10.0, //垂直子Widget之间间距 crossAxisCount: 2, //一行的Widget数量 ), itemCount: listData.length, itemBuilder: this._getListData, ); } }
* Padding(个人感觉和Container很像)（下面的代码很难看，重要的是思路）
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( padding: EdgeInsets.fromLTRB(0, 0, 10, 0), child: GridView.count( crossAxisCount: 2, childAspectRatio: 1.7, children: <Widget>[ Padding( padding: EdgeInsets.fromLTRB(10, 10, 0, 0), child: Image.network( 'https://www.itying.com/images/flutter/1.png', fit: BoxFit.cover, ), ), Padding( padding: EdgeInsets.fromLTRB(10, 10, 0, 0), child: Image.network( 'https://www.itying.com/images/flutter/2.png', fit: BoxFit.cover, ), ), Padding( padding: EdgeInsets.fromLTRB(10, 10, 0, 0), child: Image.network( 'https://www.itying.com/images/flutter/3.png', fit: BoxFit.cover, ), ), Padding( padding: EdgeInsets.fromLTRB(10, 10, 0, 0), child: Image.network( 'https://www.itying.com/images/flutter/4.png', fit: BoxFit.cover, ), ), Padding( padding: EdgeInsets.fromLTRB(10, 10, 0, 0), child: Image.network( 'https://www.itying.com/images/flutter/5.png', fit: BoxFit.cover, ), ), Padding( padding: EdgeInsets.fromLTRB(10, 10, 0, 0), child: Image.network( 'https://www.itying.com/images/flutter/6.png', fit: BoxFit.cover, ), ), Padding( padding: EdgeInsets.fromLTRB(10, 10, 0, 0), child: Image.network( 'https://www.itying.com/images/flutter/7.png', fit: BoxFit.cover, ), ), ], )); } }
效果图
* Row横向排序（Column同理）
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Container( height: 400.0, width: 300.0, color: Colors.yellow, padding: EdgeInsets.all(10), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ IconContainer(Icons.home, color: Colors.blue), IconContainer(Icons.search, color: Colors.red), IconContainer(Icons.select_all, color: Colors.orange) ], ), ); } } class IconContainer extends StatelessWidget { double size; Color color; IconData icon; IconContainer(this.icon, {this.color = Colors.red, this.size = 30.0}); @override Widget build(BuildContext context) { return Container( height: 80.0, width: 80.0, color: this.color, child: Center( child: Icon( this.icon, size: this.size, color: Colors.white, ), ), ); } }
效果图
* 复杂布局
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Column(children: <Widget>[ Row( children: <Widget>[ Expanded( child: Container( height: 200, color: Colors.black, child: Text('你好Flutter'), )) ], ), SizedBox(height: 10), Row(children: <Widget>[ Expanded( flex: 2, child: Container( height: 180, child: Image.network( 'https://www.itying.com/images/flutter/1.png', fit: BoxFit.cover))), SizedBox(width: 10), Expanded( flex: 1, child: Container( height: 180, child: ListView( children: <Widget>[ Container( height: 85, child: Image.network( 'https://www.itying.com/images/flutter/2.png', fit: BoxFit.cover)), SizedBox(height: 10), Container( height: 85, child: Image.network( 'https://www.itying.com/images/flutter/3.png', fit: BoxFit.cover)), ], ))) ]) ]); } }
效果图
* Stack+Align
Stack(类似android的relativelayout)
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Container( height: 400, width: 300, color: Colors.red, child: Stack( children: <Widget>[ Align( alignment: Alignment.topLeft, child: Icon(Icons.home, size: 40, color: Colors.white), ), Align( alignment: Alignment.center, child: Icon(Icons.search, size: 30, color: Colors.white), ), Align( alignment: Alignment.bottomRight, child: Icon(Icons.settings_applications, size: 60, color: Colors.white), ), ], ), ), ); } }
效果图
* Stack+Positioned
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Container( height: 400, width: 300, color: Colors.red, child: Stack( children: <Widget>[ Positioned( left: 10, //距离左边10 child: Icon(Icons.home, size: 40, color: Colors.white), ), Positioned( bottom: 0, //距离左边0 left: 100, //距离左边100 child: Icon(Icons.search, size: 30, color: Colors.white), ), Positioned( right: 0, //距离右边0 child: Icon(Icons.settings_applications, size: 60, color: Colors.white), ), ], ), ), ); } }
效果图
* AspectRatio宽高比组件
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return AspectRatio( aspectRatio: 3.0 / 1.0, //宽高比 child: Container( color: Colors.red, ), ); } }
效果图
* 卡片
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( children: <Widget>[ Card( margin: EdgeInsets.all(10), child: Column( children: <Widget>[ ListTile( title: Text( '张三', style: TextStyle(fontSize: 28), ), subtitle: Text('高级工程师'), ), ListTile( title: Text("电话：xxxxx"), ), ListTile( title: Text("地址：xxx"), ) ], ), ), Card( margin: EdgeInsets.all(10), child: Column( children: <Widget>[ ListTile( title: Text( '王五', style: TextStyle(fontSize: 28), ), subtitle: Text('高级工程师'), ), ListTile( title: Text("电话：xxxxx"), ), ListTile( title: Text("地址：xxx"), ) ], ), ), ], ); } }
效果图
* 图文卡片
listData.dart
List listData = [ { "title": 'zhangsan', "author": 'alibaba', "imageUrl": 'https://www.itying.com/images/flutter/1.png', "discription": 'flutter is google‘s mobile UI framework', }, { "title": 'lisi', "author": 'huawei', "imageUrl": 'https://www.itying.com/images/flutter/2.png', "discription": 'flutter is google‘s mobile UI framework', }, { "title": 'wangwu', "author": 'wangyi', "imageUrl": 'https://www.itying.com/images/flutter/3.png', "discription": 'flutter is google‘s mobile UI framework', }, { "title": 'zhaoliu', "author": 'jinritoutiao', "imageUrl": 'https://www.itying.com/images/flutter/4.png', "discription": 'flutter is google‘s mobile UI framework', }, { "title": 'qixi', "author": 'dajiang', "imageUrl": 'https://www.itying.com/images/flutter/5.png', "discription": 'flutter is google‘s mobile UI framework', }, { "title": 'batiao', "author": 'tengxun', "imageUrl": 'https://www.itying.com/images/flutter/6.png', "discription": 'flutter is google‘s mobile UI framework', }, { "title": 'jiubing', "author": 'weixin', "imageUrl": 'https://www.itying.com/images/flutter/7.png', "discription": 'flutter is google‘s mobile UI framework', }, ];
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter Demo')), body: HomeContent(), ), theme: ThemeData(primaryColor: Colors.blue), ); } } class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( children: listData.map((value) { return Card( margin: EdgeInsets.all(10), child: Column( children: <Widget>[ AspectRatio( aspectRatio: 20 / 9, child: Image.network(value["imageUrl"], fit: BoxFit.cover), ), ListTile( leading: CircleAvatar( //头像组件 backgroundImage: NetworkImage(value["imageUrl"])), title: Text(value["title"]), subtitle: Text( value["discription"], overflow: TextOverflow.ellipsis, ), ) ], ), ); }).toList(), ); }
效果图很好看
* Wrap 流布局
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Wrap( spacing: 10, runSpacing: 10, // direction: Axis.vertical,//竖直排列 alignment: WrapAlignment.start, children: <Widget>[ MyButton("斗罗大陆"), MyButton("遮天"), MyButton("盗墓笔记"), MyButton("天龙八部"), MyButton("凡人修仙传"), MyButton("大主宰"), MyButton("仙逆"), MyButton("斗鱼"), MyButton("校花的贴身高手"), MyButton("酒神"), MyButton("最好的我们"), ], ); } } class MyButton extends StatelessWidget { final String text; MyButton(this.text); @override Widget build(BuildContext context) { return RaisedButton( child: Text(this.text), textColor: Theme.of(context).accentColor, onPressed: () {}, ); } }
效果图
欢迎关注我的微信公众号：安卓圈
