1. AspectRatio 组件
AspectRatio 的作用是根据设置调整子元素 child 的宽高比。
AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。
如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先适应布局限制条件，而忽略所设置的比率。
常见属性：
1. aspectRatio 宽高比。页面最终也许不会按这个值去布局， 具体则要看综合因素，这只是一个参考值；
2. child 子组件。值的类型为Widget；
代码示例：
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；
代码示例：
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组件实现图文列表。
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. 用本地模拟数据列表实现卡片列表
模拟数据列表：
// 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',
}
];
卡片列表示例：
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()
);
}
}
效果图如下：
