1.Flutter AspectRatio组件

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

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

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

约束之前：

return Container(width: 300,color: Colors.blue,);

约束后：

return Container(width: 300,color: Colors.blue,child: AspectRatio(aspectRatio: 2.0 / 1.0,),);

2.Card卡片组件

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

return ListView(children: [Card(margin: EdgeInsets.all(10),child: Column(children: [ListTile(title: Text('张三',style: TextStyle(fontSize: 28),),subtitle: Text('高级工程师'),),ListTile(title: Text('电话：xxx'),),ListTile(title: Text('地址：xxx'),),],),),Card(margin: EdgeInsets.all(10),child: Column(children: [ListTile(title: Text('李四',style: TextStyle(fontSize: 28),),subtitle: Text('高级工程师'),),ListTile(title: Text('电话：xxx'),),ListTile(title: Text('地址：xxx'),),],),),Card(margin: EdgeInsets.all(10),child: Column(children: [ListTile(title: Text('王五',style: TextStyle(fontSize: 28),),subtitle: Text('高级工程师'),),ListTile(title: Text('电话：xxx'),),ListTile(title: Text('地址：xxx'),),],),),],);

实现图文列表：

return ListView(children: [Card(margin: EdgeInsets.all(10),child: Column(children: [AspectRatio(child: Image.network('https://cdn.pixabay.com/photo/2022/12/04/16/17/leaves-7634894_640.jpg',fit: BoxFit.cover,),aspectRatio: 16 / 9),ListTile(leading: ClipOval(child: Image.network('https://cdn.pixabay.com/photo/2022/12/04/16/17/leaves-7634894_640.jpg',fit: BoxFit.cover,height: 60,width: 60,),),title: Text('xxx'),subtitle: Text('xxx'),)],),),Card(margin: EdgeInsets.all(10),child: Column(children: [AspectRatio(child: Image.network('https://cdn.pixabay.com/photo/2022/12/04/16/17/leaves-7634894_640.jpg',fit: BoxFit.cover,),aspectRatio: 16 / 9),ListTile(leading: CircleAvatar(backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2022/12/04/16/17/leaves-7634894_640.jpg'),),title: Text('xxx'),subtitle: Text('xxx'),)],),),],);

圆形头像的处理方式不单可以使用ClipOval，也可以使用CircleAvatar，后者是专门处理图片为头像的

练习：
将listData.dart中的数据做成图文列表
listData.dart：

List listDate=[{"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 'listData.dart';class MyApp_Card extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Flutter Demo'),),body: HomeContent(),),);}
}class HomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return ListView(children: listDate.map((e){return Card(margin: EdgeInsets.all(10),child: Column(children: [AspectRatio(child: Image.network(e['imageUrl'],fit: BoxFit.cover,),aspectRatio: 16 / 9),ListTile(leading: CircleAvatar(backgroundImage: NetworkImage(e['imageUrl'],),),title: Text(e['title']),subtitle: Text(e['description'],maxLines: 2,overflow:TextOverflow.ellipsis //文本剪切),)],),);}).toList());}
}

Flutter页面布局：Flutter AspectRatio、Card卡片组件、卡片图文列表相关推荐

开启Fluter基础之旅三-------Material Design风格组件、Cupertino风格组件、Flutter页面布局篇...
Material Design风格组件: 继续接着上一次https://www.cnblogs.com/webor2006/p/12545701.html的Material Design进行学习. A ...
flutter页面布局HTML,Flutter开发实战初级（2）页面布局详解
初级根底系列 Flutter开发实战初级(1)ListView详解 Flutter开发实战初级(2)布局详解项目实战系列 Flutter开发实战高仿微信(1)主页 Flutter开发实战高仿微信 ...
Flutter页面布局：Wrap组件
Wrap 可以实现流布局,单行的 Wrap 跟 Row 表现几乎一致,单列的 Wrap 则跟 Column 表现几乎一致.但 Row 与 Column 都是单行单列的,Wrap 则突破了这个限制,ma ...
Flutter页面布局之百分百布局FractionallySizedBox
import 'package:flutter/material.dart';class Test extends StatelessWidget {@overrideWidget build(Bui ...
Flutter中AspectRatio、Card 卡片组件
1. AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高 ...
【Flutter】Flutter 页面生命周期 ( 初始化期 | createState | initState | 更新期 | build | 销毁期 | dispose)
文章目录一.Flutter 页面生命周期 1.StatelessWidget 组件生命周期函数 2.StatefulWidget 组件生命周期函数二.StatefulWidget 组件生命周期 1 ...
Flutter组件--卡片效果(card组件)
Card是卡片组件块,内容可以由大多数类型的Widget构成,Card具有圆角和阴影,这让它看起来有立体感. 属性说明 margin 外边距 child 子组件 elevation 阴影值的深度 c ...
【Flutter】【widget】【card】卡片组件的使用和练习代码
文章目录前言一.card是什么? 二.使用步骤 1.基础的使用 2.提升总结前言一.card是什么? 卡片组件,可以制作很多卡片类型的widget,比如商品,个人信息卡片等二.使用步骤 1 ...
Flutter Sliver大家族之SliverPersistentHeader()和SliverToBoxAdapter()组件(实现固定头布局)③
Flutter Sliver大家庭之SliverPersistentHeade和SliverToBoxAdapter实现固定头布局③ SliverPersistentHeader SliverToBo ...

Flutter页面布局：Flutter AspectRatio、Card卡片组件、卡片图文列表

1.Flutter AspectRatio组件

2.Card卡片组件

Flutter页面布局：Flutter AspectRatio、Card卡片组件、卡片图文列表相关推荐

最新文章

热门文章