[Flutter] 流式布局列表
流式布局列表
SingleChildScrollView+Wrap
STEP01 : 生成wrap布局
Widget getItem() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
spacing: 10,
children: List.generate(_list.length, (i) {
return i != _list.length - 1
? ((i + 1) % 3 == 0 //判断是否为第三个,是的话使用长item,否则短item
? _rectangleCardNotState(i)
: _squareCard(i))
: _getMoreWidget();
}),
)),
],
);
}
STEP02 : 再包裹SingleChildScrollView使其可以滚动
_listCustom() {
//若有另外一层数据比如“标题”,可使用ListView
return SingleChildScrollView(
controller: _scrollController,
child: getItem(),
);
}
示例demo
ListView+Wrap
需要注意的是,遍历数据是在Wrap里面,虽然SingleChildScrollView一般不会去遍历数据。但像我这种小白,会傻乎乎的用ListView.buider+Wrap,然后在ListView.builder里遍历数据,传过来就只有一列一个Widget了,起不到wrap的效果。
还要说的是,ListView.builder+Wrap不是不能用,利用他们可以遍历两个层级的数据,如下面的数据格式,标题+内容。
这样就可以让ListView.builder遍历title,content层级,Wrap来遍历content里面的层级。
Data = [
{
"title": "经典选集",
"content": [
{"articleName": "倚天屠龙记", "author": "金庸"},
]
},
{
"title": "网络小说",
"content": [
{"articleName": "斗破苍穹", "author": "天蚕土豆"},
]
}
];
直接贴关键代码
class _MyHomePageState extends State<MyHomePage> {
final List _list = Data;///将数据赋值给新的列表
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
///ListView.builder
body: ListView.builder(
itemCount: _list.length,
itemBuilder: (context, index) {
///取得每个content值加到列表
List _contentList = _list[index]['content'];
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
///title
Container(
color: Colors.amber,
alignment: Alignment.bottomLeft,
child: Text(
_list[index]['title'],
style: TextStyle(fontSize: 20),
),
),
///content
Container(
alignment: Alignment.centerLeft,
///Wrap
child: Wrap(
children: List.generate(_contentList.length, (index) {
return Container(
margin: EdgeInsets.all(10),
height: 40,
decoration: BoxDecoration(
color: Colors.pinkAccent,
border: Border.all(width: 1),
borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
///在content列表中取得articleName
_contentList[index]['articleName'],
style: TextStyle(color: Colors.white),
),
),
);
})),
)
],
);
}));
}
}
示例demo
分类:
Flutter学习
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效