[英]Wrap ListView.separated filter chips in Flutter
我正在制作一个使用过滤芯片的过滤屏幕,我试图将这些芯片包装成多行以避免剪切/水平滚动,但我无法实现这一点。 我试图将 Wrap() class 放在返回中,但它们只是堆叠在一起而不是均匀分布。
这是我当前的代码:
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,
),
),
),
],
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.