1. AspectRatio 组件
AspectRatio 的作用是根据设置调整子元素 child 的宽高比。
AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。
如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先适应布局限制条件，而忽略所设置的比率。
常见属性：
1. aspectRatio 宽高比。页面最终也许不会按这个值去布局， 具体则要看综合因素，这只是一个参考值；
2. child 子组件。值的类型为Widget；
代码示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } // 抽离成一个单独的组件 class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( // 导航条 appBar:AppBar(title:Text('Flutter App')), // 主体 body:HomeContent(), ), // 主题 theme: ThemeData(primarySwatch:Colors.yellow), ); } } // AspectRatio组件的用法 class HomeContent extends StatelessWidget{ @override Widget build(BuildContext context) { return AspectRatio( // 高度与宽度的比值 aspectRatio: 5.0/1.0 , child:Container( color:Colors.red ) ); } } |
效果图如下：
2. Card 组件
Card 是卡片组件块，内容可以由大多数类型的 Widget 构成，Card 具有圆角和阴影，这让它看起来有立体感。
常见属性：
1. margin 外边距。类型为EdgeInsets；
2. shape 阴影效果。默认的阴影效果为圆角的长方形边；
3. child 子组件。类型为widget；
代码示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } // 抽离成一个单独的组件 class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( // 导航条 appBar:AppBar(title:Text('Flutter App')), // 主体 body:HomeContent(), ), // 主题 theme: ThemeData(primarySwatch:Colors.yellow), ); } } // Card组件的用法 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( "电话：13999999xxx", style:TextStyle(fontSize:28) ), ), ListTile( title:Text( "北京中关村", style:TextStyle(fontSize:28) ), ) ], ) ), Card( margin:EdgeInsets.all(10), child:Column( children: <Widget>[ ListTile( title:Text( "李四", style:TextStyle(fontSize:28) ), subtitle: Text("中级工程师"), ), ListTile( title:Text( "电话：13666666xxx", style:TextStyle(fontSize:28) ), ), ListTile( title:Text( "北京中关村", style:TextStyle(fontSize:28) ), ) ], ) ) ], ); } } |
效果图如下：
3. Card 组件应用实例
利用Card组件实现图文列表。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } // 抽离成一个单独的组件 class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( // 导航条 appBar:AppBar(title:Text('Flutter App')), // 主体 body:HomeContent(), ), // 主题 theme: ThemeData(primarySwatch:Colors.yellow), ); } } // 利用Card组件实现图文列表 class HomeContent extends StatelessWidget{ @override Widget build(BuildContext context) { return ListView( children: <Widget>[ Card( margin:EdgeInsets.all(10), child:Column( children: <Widget>[ AspectRatio( // 图片宽高比 aspectRatio: 16/9, child:Image.network("http://www.itying.com/images/flutter/1.png",fit: BoxFit.cover), ), ListTile( leading:ClipOval( child:Image.network( "http://www.itying.com/images/flutter/1.png", fit: BoxFit.cover, width:40, height:40 ), ), title:Text("经典传奇"), subtitle:Text("这是新中国第一大案...") ) ] ) ), Card( margin:EdgeInsets.all(10), child:Column( children: <Widget>[ AspectRatio( // 图片宽高比 aspectRatio: 16/9, child:Image.network("http://www.itying.com/images/flutter/1.png",fit: BoxFit.cover), ), ListTile( // 圆形头像组件 leading:CircleAvatar( backgroundImage: NetworkImage("http://www.itying.com/images/flutter/1.png"), ), title:Text("经典传奇"), subtitle:Text("这是新中国第一大案...") ) ] ) ) ] ); } } |
效果图如下：
4. 用本地模拟数据列表实现卡片列表
模拟数据列表：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// lib/res/listData.dart List listData = [ { "title": 'Candy Shop', "author": 'Mohamed Chahin', "imageUrl": 'https://www.itying.com/images/flutter/1.png', "description":'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing', }, { "title": 'Childhood in a picture', "author": 'Google', "imageUrl": 'https://www.itying.com/images/flutter/2.png', "description":'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing', }, { "title": 'Alibaba Shop', "author": 'Alibaba', "imageUrl": 'https://www.itying.com/images/flutter/3.png', "description":'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor', }, { "title": 'Candy Shop', "author": 'Mohamed Chahin', "imageUrl": 'https://www.itying.com/images/flutter/4.png', "description":'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor', }, { "title": 'Tornado', "author": 'Mohamed Chahin', "imageUrl": 'https://www.itying.com/images/flutter/5.png', "description":'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing', }, { "title": 'Undo', "author": 'Mohamed Chahin', "imageUrl": 'https://www.itying.com/images/flutter/6.png', "description":'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing', }, { "title": 'white-dragon', "author": 'Mohamed Chahin', "imageUrl": 'https://www.itying.com/images/flutter/7.png', "description":'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor', } ]; |
卡片列表示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import 'package:flutter/material.dart'; import 'res/listData.dart'; void main(){ runApp(MyApp()); } // 抽离成一个单独的组件 class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( // 导航条 appBar:AppBar(title:Text('Flutter App')), // 主体 body:HomeContent(), ), // 主题 theme: ThemeData(primarySwatch:Colors.yellow), ); } } // 渲染数据列表实现卡片列表 class HomeContent extends StatelessWidget{ @override Widget build(BuildContext context) { return ListView( // 遍历数据 children:listData.map((obj){ return Card( margin:EdgeInsets.all(10), child:Column( children: <Widget>[ AspectRatio( // 图片宽高比 aspectRatio: 16/9, child:Image.network(obj["imageUrl"],fit: BoxFit.cover), ), ListTile( // 圆形头像组件 leading:CircleAvatar( backgroundImage: NetworkImage(obj["imageUrl"]), ), // 标题 title:Text(obj["title"]), // 副标题 subtitle:Text( obj["description"], overflow:TextOverflow.ellipsis, maxLines:1, ) ) ] ) ); }).toList() ); } } |
效果图如下：
