Wrap流式布局使用

一、`Wrap`流式布局

Wrap 为子组件进行水平或者垂直方向布局，且当空间用完时，Wrap 会自动换行。

二、使用

/*** description：Wrap流式布局* demo1:  List.generate()* demo2:   myList.map().toList()----->List<Widget>*/
class WrapDemo extends StatefulWidget {const WrapDemo({Key? key}) : super(key: key);@override_WrapDemoState createState() => _WrapDemoState();
}class _WrapDemoState extends State<WrapDemo> {List names = ["aaa","sss","ddd","fff","ggg","hhh","jjj","aaa","sss","ddd","fff","ggg","hhh","jjj"];@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Column(children: [wrapDemo1(),SizedBox(height: 50,),wrapDemo2()],),),);}Widget wrapDemo1() {return Wrap(direction: Axis.horizontal,alignment: WrapAlignment.spaceEvenly, //主轴方向上对齐方式，作用于每一行// runAlignment: WrapAlignment.spaceEvenly,//交叉轴方向上,将每一行看作一个整体的对齐方式// crossAxisAlignment: WrapCrossAlignment.center,children: List.generate(names.length, (index) => getItem(index)),);}Widget wrapDemo2() {List<Widget> widgetList = names.map((element) => Card(//设置圆角shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16))),elevation: 5, //阴影高度child: Text(element,style: const TextStyle(fontSize: 20),),)).toList();return Wrap(children: widgetList,);}Widget getItem(index) {return Card(child: Container(color: Colors.black12,width: 80,height: 50,child: Text(names[index]),),);}
}

Wrap流式布局使用相关推荐

Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...
第 2-3 课：流式布局组件详解（Flow、Wrap）
这节课将继续讲解 Flutter 的常用组件中的布局使用的组件,本节课主要讲解 Flutter 里的流式布局(或者瀑布)组件的用法.在 Flutter 中主要通过 Flow 和 Wrap 组件来实现流 ...
46、Flutter之布局组件流式布局Wrap，Flow
Row 和 Colum 如果子 widget 超出屏幕范围,则会报溢出错误,如: Row(children: <Widget>[Text("xxx"*100)], ); ...
Flutter 流式布局、自动换行（Wrap、Flow）
文章目录流式布局 Wrap Flow 流式布局流式布局在移动端是非常常见的,比如商品列表,瀑布流.标签页等等.使用Android原生来实现流式布局还是有点麻烦的,甚至需要自定义view或者使用第三 ...
Flutter 流式布局之Wrap详解
Wrap Wrap可以为子控件进行水平或者垂直方向布局,且当空间用完时,Wrap会自动换行,也是常说的流式布局. 创建多个子控件做为Wrap的子控件,代码如下: <span style=&qu ...
从上往下流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
两栏布局，三栏布局，等高布局，流式布局
读前笑一笑: 我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办-? 她淡淡的回了句:"我就脱了上衣,然后说,别激动,是自己人"--自己人--己人-人- 两栏布局: 1. ...
html流式布局插件,Jquery瀑布流网格布局插件
插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件.通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图 ...
Flutter文本标签TextTagWidget，搜索记录流式布局显示文本标签
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章 1 添加依赖 flut ...

Wrap流式布局使用

一、`Wrap`流式布局

二、使用

Wrap流式布局使用相关推荐

最新文章

热门文章

Wrap流式布局使用

一、Wrap流式布局

二、使用

Wrap流式布局使用相关推荐

最新文章

热门文章

一、`Wrap`流式布局