Flutter-自定义切换按钮选择
我正在构建一排切换按钮（打开/关闭选择器），该按钮基本上是一排容器，每个容器都是一个类别，可以单击。
问：如何在选择一个类别时取消选中其他所有类别？
这是我构建的类别小部件：
Widget header(){
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 4.0, left: 0.0, right: 0.0, bottom: 6.0),
child: Container(
child: Center(
child: Column(
children: <Widget>[
SizedBox(height: 4.0,),
Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
InkWell(
splashColor: Colors.blue[100],
onTap: (){},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.blueAccent[100],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('All',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 1',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 2',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 3',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 4',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
],
),
),
SizedBox(height: 6.0,)
],
),
),
),
),
],
);
}`
2 个答案:
答案 0 :(得分：1)
最好的方法是使用ListView.builder来构建项目并保存选定的索引，但是您也可以修改现有代码以将选定的项目保存在列表中，并检查该项目是否在列表中如果是，则添加选择格式并刷新页面。您可以如下所示实现该目标，
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
List<String> selectedCategory = new List<String>();
String all = 'All';
String category1 = 'category 1';
String category2 = 'category 2';
String category3 = 'category 3';
String category4 = 'category 4';
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: Container(
padding: const EdgeInsets.all(20.0),
child: header()
)));
}
Widget header(){
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 4.0, left: 0.0, right: 0.0, bottom: 6.0),
child: Container(
child: Center(
child: Column(
children: <Widget>[
SizedBox(height: 4.0,),
Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
InkWell(
splashColor: Colors.blue[100],
onTap: (){
selectedCategory.add(all);
selectedCategory.add(category1);
selectedCategory.add(category2);
selectedCategory.add(category3);
selectedCategory.add(category4);
setState(() {});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: selectedCategory.contains(all) ? Colors.blueAccent[100] : Colors.grey[500],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('All',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){
selectedCategory = new List<String>();
selectedCategory.add(category1);
setState(() {});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: selectedCategory.contains(category1) ? Colors.blue[100] : Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 1',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){
selectedCategory = new List<String>();
selectedCategory.add(category2);
setState(() {});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: selectedCategory.contains(category2) ? Colors.blue[100] : Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 2',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){
selectedCategory = new List<String>();
selectedCategory.add(category3);
setState(() {});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: selectedCategory.contains(category3) ? Colors.blue[100] : Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 3',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){
selectedCategory = new List<String>();
selectedCategory.add(category4);
setState(() {});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: selectedCategory.contains(category4) ? Colors.blue[100] : Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 4',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
],
),
),
SizedBox(height: 6.0,)
],
),
),
),
),
],
);
}
}
希望这会有所帮助。
答案 1 :(得分：0)
好吧，这段代码可以优化，但是到目前为止，它工作得很好：
class Header extends StatefulWidget {
@override
_HeaderState createState() => _HeaderState();
}
class _HeaderState extends State<Header> {
List<bool> isSelected;
@override
void initState() {
isSelected = [true, false, false, false, false];
super.initState();
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
ToggleButtons(
borderColor: Colors.transparent,
fillColor: Colors.transparent,
borderWidth: null,
selectedBorderColor: Colors.transparent,
selectedColor: Colors.transparent,
splashColor: Colors.transparent,
children: <Widget>[
!isSelected[0] ?
Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
margin: EdgeInsets.only(right: 3.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 1',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
)
:Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.blueAccent[100],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 1',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w700),),
),
!isSelected[1] ?
Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 2',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
)
:Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.blueAccent[100],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 2',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w700),),
),
!isSelected[2] ?
Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 3',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
)
:Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.blueAccent[100],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 3',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w700),),
),
!isSelected[3] ?
Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 4',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
)
:Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.blueAccent[100],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 4',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w700),),
),
!isSelected[4] ?
Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 5',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
)
:Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.blueAccent[100],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 5',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w700),),
),
],
onPressed: (int index) {
setState(() {
for (int i = 0; i < isSelected.length; i++) {
isSelected[i] = i == index;
}
});
},
isSelected: isSelected,
),
],
);
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？