flutter - 在 Flutter 中包装 ListView.separated 过滤芯片
问题描述
我正在制作一个使用过滤芯片的过滤屏幕,我试图将这些芯片包装成多行以避免剪切/水平滚动,但我无法实现这一点。我试图将 Wrap() 类放在返回中,但它们只是堆叠在一起而不是均匀分布。
这是我当前的代码:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Screen1 extends StatefulWidget {
@override
_Screen1State createState() => _Screen1State();
}
class _Screen1State extends State<Screen1> {
var data = ['Chip 1', 'Chip 2', 'Chip 3', 'Chip 4', 'Chip 5'];
var selected = [];
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
iconTheme: IconThemeData(
color: Colors.black87,
),
leading: IconButton(
icon: Icon(Icons.close),
),
centerTitle: true,
title: Text(
'Screen',
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold,
),
),
backgroundColor: Colors.green,
),
body: SingleChildScrollView(
padding: EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Row(
children: <Widget>[
Text(
"Label 1",
),
],
),
),
SizedBox(height: size.height * 0.02),
Container(
height: size.height * 0.05,
child: ListView.separated(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: data.length,
separatorBuilder: (BuildContext context, int index) {
return SizedBox(
width: size.width * 0.03,
);
},
itemBuilder: (BuildContext context, int index) => FilterChip(
padding: EdgeInsets.all(10),
label: Text(
data[index],
style: TextStyle(fontSize: 20),
),
onSelected: (bool value) {
if (selected.contains(index)) {
selected.remove(index);
} else {
selected.add(index);
}
setState(() {});
},
selected: selected.contains(index),
selectedColor: Colors.deepOrange,
labelStyle: TextStyle(
color: Colors.white,
),
backgroundColor: Colors.green,
),
),
),
],
),
),
);
}
}
解决方案
推荐阅读
- r - R中不一致的函数分离
- javascript - pdfkit表格中的对齐问题?
- angular - 从 paramMap 获取参数的问题
- python - Python:绘制具有x值之间实际距离的折线图
- azure-pipelines - Azure 管道的 CefSharp 构建错误:无法加载文件或程序集“CefSharp.Core.dll”
- java - MockMvc 抛出内部异常而不是返回带有 4xx 状态码的响应
- android - .gradle:gitlab CI 中的目录不为空
- python - 如何从模板生成数据结构?
- python-3.x - 如何使用 django 模型将图像存储在数据库中
- reactjs - 为什么单击我的模态时,模型消失了