Flutter中AspectRatio、Card 卡片组件

1. AspectRatio 组件

AspectRatio 的作用是根据设置调整子元素 child 的宽高比。

AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。

如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先适应布局限制条件，而忽略所设置的比率。

常见属性：

1. aspectRatio 宽高比。

页面最终也许不会按这个值去布局，具体则要看综合因素，这只是一个参考值；

2. child 子组件；

代码示例：

import 'package:flutter/material.dart';void main(){runApp(MyApp());
}// 抽离成一个单独的组件
class MyApp extends StatelessWidget{@overrideWidget 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{@overrideWidget build(BuildContext context) {return AspectRatio(// 高度与宽度的比值aspectRatio: 5.0/1.0 ,child:Container(color:Colors.red));}
}

效果图如下：

2. Card 组件

Card 是卡片组件块，内容可以由大多数类型的 Widget 构成，Card 具有圆角和阴影，这让它看起来有立体感。

常见属性：

1. margin 外边距；

2. shape 阴影效果；

3. child 子组件；

代码示例：

import 'package:flutter/material.dart';void main(){runApp(MyApp());
}// 抽离成一个单独的组件
class MyApp extends StatelessWidget{@overrideWidget 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{@overrideWidget 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{@overrideWidget 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{@overrideWidget 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{@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 导航条appBar:AppBar(title:Text('Flutter App')),// 主体body:HomeContent(),),// 主题theme: ThemeData(primarySwatch:Colors.yellow),);}
}// 渲染数据列表实现卡片列表
class HomeContent extends StatelessWidget{@overrideWidget 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());}
}

效果图如下：

Flutter中AspectRatio、Card 卡片组件相关推荐

Flutter页面布局：Flutter AspectRatio、Card卡片组件、卡片图文列表
1.Flutter AspectRatio组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,wid ...
Flutter 中神奇的 AbsorbPointer 组件
Flutter 中神奇的 AbsorbPointer 组件
Flutter中通过循环渲染组件
class ContactsState extends State<Contacts>{List formList;initState() {super.initState();formL ...
React 组件封装之 Card 卡片
React 组件封装之 Card 一.Card 卡片二.使用案例三.API 使用指南四.源代码一.Card 卡片组件说明: 使列表成为卡片形式的布局. 效果展示: 二.使用案例 import ...
官方文档——一篇文章弄懂Flutter中的布局
来自Flutter中文资源主页https://flutter.cn/ 原文:https://flutter.cn/docs/development/ui/layout Flutter 中的布局要点 ...
Flutter 中文文档：Flutter 中的布局
要点 widgets 是用于构建 UI 的类. widgets 可以用于布局和展示 UI 元素. 通过组合简单的 widgets 来构建复杂的 widgets. Flutter 布局的核心机制是 wi ...
flutter bloc_如何使用BLoC模式处理Flutter中的状态
flutter bloc Last year, I picked up Flutter and I must say it has been an awesome journey so far. Fl ...
【Flutter】【widget】【card】卡片组件的使用和练习代码
文章目录前言一.card是什么? 二.使用步骤 1.基础的使用 2.提升总结前言一.card是什么? 卡片组件,可以制作很多卡片类型的widget,比如商品,个人信息卡片等二.使用步骤 1 ...
Flutter 中 Card 设置圆角
Flutter 中 Card 设置圆角圆角设置非常常用,本文介绍 Card 容器组件的圆角等设置方法. 圆角设置 //shape 设置边,可以设置圆角 shape: RoundedRectangle ...

Flutter中AspectRatio、Card 卡片组件

1. AspectRatio 组件

2. Card 组件

3. Card 组件应用实例

4. 用本地模拟数据列表实现卡片列表

Flutter中AspectRatio、Card 卡片组件相关推荐

最新文章

热门文章