flutter - 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,)
],
),
),
),
),
],
);
}`
解决方案
最好的方法是用于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,)
],
),
),
),
),
],
);
}
}
希望这可以帮助。
推荐阅读
- php - $row 将在此返回什么
- regex - 我如何将变量多行 perl 正则表达式与不同的规则匹配
- c# - 如何有条件地从 ASP.NET Core 注册中删除控制器并添加到 ServiceCollection
- python - 熊猫：按组插入一个空白行和一个带索引的行？
- azure - Azure Powershell - 无法将子网设置添加到数据库
- c - 当某个条件为假时如何打破while循环
- html - Bootstrap 4 - 将 div 垂直对齐到列的底部
- java - 如果互联网速度慢并且我不知道要下载的文件大小，如何设置 connectTimeout
- ajax - 在laravel中获取php标签作为前缀的Ajax响应
- javascript - 如何使用 HTML 文件制作 iframe