做网站找哪家好熊掌号,广西建设网行业版,百度网站制作公司,百度应用平台#x1f525; 本文由 程序喵正在路上 原创#xff0c;CSDN首发#xff01; #x1f496; 系列专栏#xff1a;Flutter学习 #x1f320; 首发时间#xff1a;2024年5月25日 #x1f98b; 欢迎关注#x1f5b1;点赞#x1f44d;收藏#x1f31f;留言#x1f43e; 目… 本文由 程序喵正在路上 原创CSDN首发 系列专栏Flutter学习 首发时间2024年5月25日 欢迎关注点赞收藏留言 目录 AspectRatio组件Card组件Card实现一个通讯录的卡片Card实现一个图文列表 按钮组件按钮组件的属性ElevatedButton、TextButton、OutlinedButton、IconButton带图标的按钮修改按钮的宽度高度自适应按钮配置圆角圆形按钮修改OutlinedButton边框 Wrap组件自定义一个按钮组件Wrap组件的简单使用Wrap组件搜索页面布局 AspectRatio组件
AspectRatio 的作用是根据设置调整子元素 child 的宽高比。
AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展widget 的高度是由宽度和比率决定的类似于 BoxFit 中的 contain按照固定比率去尽量占满区域。
如果在满足所有限制条件过后无法找到一个可行的尺寸AspectRatio 最终将会去优先适应布局限制条件而忽略所设置的比率。
属性说明aspectRatio宽高比最终可能不会根据这个值去布局具体要看综合因素外层是否允许按照这种比率进行布局这只是一个参考值chlid子组件
class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return AspectRatio(aspectRatio: 3 / 1, //宽度为屏幕的宽度高度为宽度的三分之一child: Container(color: Colors.blue,));}
}Card组件
Card 是卡片组件块内容可以由大多数类型的 Widget 构成Card 具有圆角和阴影这让它看起来有立体感。
属性说明margin外边距child子组件elevation阴影值的深度color背景颜色shadowColor阴影颜色clipBehavior内容溢出的剪切方式Clip.none不剪切Clip.hardEdge剪切但不应用抗锯齿Clip.antiAlias剪切而且抗锯齿Clip.antiAliasWithSaveLayer带有抗锯齿的剪辑并在剪辑之后立即保存 saveLayerShapeCard 的阴影效果默认的阴影效果为圆角的长方形边
Card实现一个通讯录的卡片
实现如下效果 class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return ListView(children: [Card(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),elevation: 20, //阴影深度color: Colors.blue.shade100,margin: const EdgeInsets.all(10),child: const Column(children: [ListTile(title: Text(张三,style: TextStyle(fontSize: 28),),subtitle: Text(高级软件工程师),),Divider(),ListTile(title: Text(电话12345678910)),ListTile(title: Text(地址北京市海淀区))],),),Card(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),elevation: 20, //阴影深度color: Colors.green.shade100,margin: const EdgeInsets.all(10),child: const Column(children: [ListTile(title: Text(张三,style: TextStyle(fontSize: 28),),subtitle: Text(高级软件工程师),),Divider(),ListTile(title: Text(电话12345678910)),ListTile(title: Text(地址北京市海淀区))],),),Card(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),elevation: 20, //阴影深度color: Colors.red.shade100,margin: const EdgeInsets.all(10),child: const Column(children: [ListTile(title: Text(张三,style: TextStyle(fontSize: 28),),subtitle: Text(高级软件工程师),),Divider(),ListTile(title: Text(电话12345678910)),ListTile(title: Text(地址北京市海淀区))],),),],);}
}Card实现一个图文列表
实现如下效果 import package:flutter/material.dart;
import ./res/listData.dart;void main() {runApp(MaterialApp(debugShowCheckedModeBanner: false,home: Scaffold(appBar: AppBar(title: const Text(Card实现图文列表)),body: const MyApp(),),));
}class MyApp extends StatelessWidget {const MyApp({super.key});ListWidget _initCardData() {var tempList listData.map((value) {return Card(elevation: 20,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),margin: const EdgeInsets.all(10),child: Column(children: [AspectRatio(aspectRatio: 16 / 9,child: Image.network(value[imageUrl],fit: BoxFit.cover,)),ListTile(leading: CircleAvatar(backgroundImage: NetworkImage(value[imageUrl]),),title: Text(value[title]),subtitle: Text(value[author]),),],),);});return tempList.toList();}overrideWidget build(BuildContext context) {return ListView(children: _initCardData(),);}
}按钮组件
按钮组件的属性
属性说明onPressed必填参数按下按钮时触发的回调接收一个方法传 null 表示按钮禁用会显示禁用相关样式child子组件style通过 ButtonStyle 装饰
ButtonStylee里面的常用的参数
属性名称值类型属性值foregroundColorColor文本颜色backgroundColorColor按钮颜色shadowColorColor阴影颜色elevationdouble阴影的范围值越大阴影范围越大padding内边距shape设置按钮的形状side设置按钮边框
ElevatedButton、TextButton、OutlinedButton、IconButton
ElevatedButton 即 “凸起” 按钮它默认带有阴影和灰色背景。按下后阴影会变大TextButton 即文本按钮默认背景透明并不带阴影。按下后会有背景色OutlineButton 默认有一个边框不带阴影且背景透明。按下后边框颜色会变亮、同时出现背景和阴影IconButton 是一个可点击的 Icon不包括文字默认没有背景点击后会出现背景
class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return ListView(children: [Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [ElevatedButton(onPressed: () {print(ElevatedButton);},child: const Text(普通按钮)),TextButton(onPressed: () {}, child: const Text(文本按钮)),OutlinedButton(onPressed: () {}, child: const Text(边框按钮)),IconButton(onPressed: () {}, icon: const Icon(Icons.thumb_up))],),]);}
}带图标的按钮
ElevatedButton、TextButton、OutlineButton 都有一个 icon 构造函数通过它可以轻松创建带图标的按钮。
class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return ListView(children: [Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ElevatedButton.icon(onPressed: () {},icon: const Icon(Icons.send),label: const Text(发送)),TextButton.icon(onPressed: () {},icon: const Icon(Icons.info),label: const Text(消息)),OutlinedButton.icon(onPressed: () {},icon: const Icon(Icons.add),label: const Text(增加))]),]);}
}修改按钮的宽度高度
按钮组件中没有属性可以让我们直接修改宽度和高度但是我们可以将按钮写在一个 Container 或者 SizeBox 里面以此来控制按钮的宽高。
class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return ListView(children: [Column(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [SizedBox(height: 80,width: 200,child: ElevatedButton(style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red),foregroundColor: MaterialStateProperty.all(Colors.black)),onPressed: () {},child: const Text(宽度高度),),),],),]);}
}自适应按钮
将按钮写在 Expanded 组件中可以让按钮自适应当还有其它组件时按钮会根据屏幕自动调节大小
class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return ListView(children: [Row(mainAxisAlignment: MainAxisAlignment.center,children: Widget[Expanded(child: Container(height: 60,margin: const EdgeInsets.all(10),child: ElevatedButton(child: const Text(自适应按钮),onPressed: () {print(自适应按钮);},),),),],)]);}
}配置圆角圆形按钮
class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return ListView(children: [Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [ElevatedButton(style: ButtonStyle(shape: MaterialStateProperty.all(//圆角RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)))),onPressed: () {},child: const Text(圆角)),SizedBox(height: 80,width: 80,child: ElevatedButton(style: ButtonStyle(shape: MaterialStateProperty.all(//圆形const CircleBorder(side: BorderSide(width: 2, color: Colors.yellow)))),onPressed: () {},child: const Text(圆形)),),],),]);}
}修改OutlinedButton边框
class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return ListView(children: [Row(mainAxisAlignment: MainAxisAlignment.center,children: Widget[Expanded(child: Container(margin: const EdgeInsets.all(20),height: 50,child: OutlinedButton(style: ButtonStyle(foregroundColor: MaterialStateProperty.all(Colors.black),side: MaterialStateProperty.all(const BorderSide(width: 1, color: Colors.blue))),onPressed: () {},child: const Text(修改边框)),),)],)]);}
}Wrap组件
自定义一个按钮组件
Wrap 可以实现流布局单行的 Wrap 跟 Row 表现几乎一致单列的 Wrap 则跟 Column 表现几乎一致。但 Row 与 Column 都是单行单列的Wrap 则突破了这个限制mainAxis 上空间不足时则向 crossAxis 上 去扩展显示。
属性说明direction主轴的方向默认水平alignment主轴的对齐方式spacing主轴方向上的间距textDirection文本方向verticalDirection定义了 children 的摆放顺序默认是 down见 Flex 相关属性介绍runAlignmentrun 的对齐方式run 可以理解为新的行或者列如果是水平方向布局的话run 可以理解为新的一行runSpacingrun 的间距
下面我们通过实现一个案例来介绍 Wrap 组件的使用
//自定义按钮
class MyButton extends StatelessWidget {String text; //按钮上的文本void Function()? onPressed;MyButton(this.text, {super.key, required this.onPressed});overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: onPressed,style: ButtonStyle(backgroundColor:MaterialStateProperty.all(const Color.fromARGB(255, 239, 237, 237)),foregroundColor: MaterialStateProperty.all(Colors.black45),),child: Text(text),);}
}Wrap组件的简单使用
class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return Padding(padding: const EdgeInsets.all(10),child: Wrap(spacing: 5, //水平方向间隔runSpacing: 5, //垂直方向间隔children: [MyButton(第1集, onPressed: () {}),MyButton(第2集, onPressed: () {}),MyButton(第3集, onPressed: () {}),MyButton(第4集, onPressed: () {}),MyButton(第5集, onPressed: () {}),MyButton(第6集, onPressed: () {}),MyButton(第7集, onPressed: () {}),MyButton(第8集, onPressed: () {}),MyButton(第9集, onPressed: () {}),MyButton(第10集, onPressed: () {}),],),);}
}Wrap组件搜索页面布局
实现如下效果 class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return Padding(padding: const EdgeInsets.all(10),child: ListView(children: [Row(children: [Text(热搜, style: Theme.of(context).textTheme.headlineSmall)],),const Divider(),Wrap(spacing: 10,runSpacing: 12,children: [MyButton(T恤, onPressed: () {}),MyButton(笔记本, onPressed: () {}),MyButton(时尚, onPressed: () {}),MyButton(游戏, onPressed: () {}),MyButton(弹射风筝, onPressed: () {}),MyButton(斗篷伞, onPressed: () {}),MyButton(猫窝鱼缸, onPressed: () {}),MyButton(鸡腿帽, onPressed: () {}),],),const SizedBox(height: 10),Row(children: [Text(历史搜索, style: Theme.of(context).textTheme.headlineSmall)],),const Divider(),const Column(children: [ListTile(title: Text(时尚)),Divider(),ListTile(title: Text(潮流)),Divider(),],),const SizedBox(height: 40),Padding(padding: const EdgeInsets.all(40),child: OutlinedButton.icon(onPressed: () {},icon: const Icon(Icons.delete),label: const Text(清空历史记录),style: ButtonStyle(foregroundColor: MaterialStateProperty.all(Colors.black38)),),)],),);}
}
