当我点击按钮时,应该会出现一个勾选,当我点击稍后出现的按钮时,不会发生这种情况
class CategoriesButton {
Widget categoriesbutton(
{onPress, color, textColor, String? title, bool selected = false}) {
return ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
backgroundColor: color,
padding: const EdgeInsets.all(4),
),
onPressed: onPress,
child: SizedBox(
width: 90,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(
selected ? Icons.check : Icons.add,
),
title!.text.color(Colors.black).fontFamily(bold).make(),
],
),
),
);
}
}
import '../consts/consts.dart';
class SubCategories extends StatefulWidget {
const SubCategories({super.key});
@override
State<SubCategories> createState() => SubCategoriesState();
}
class SubCategoriesState extends State<SubCategories> {
get isSelected => null;
@override
Widget build(BuildContext context) {
List<String> list = ['one', 'two', 'three', 'four', 'five', 'six'];
List<Widget> widget = List.empty(growable: true);
List<bool> isSelected = List.empty(growable: true);
for (int i = 0; i < list.length; i++) {
isSelected.add(false);
widget.add(
CategoriesButton().categoriesbutton(
color: const Color.fromRGBO(134, 126, 108, 1),
title: list[i],
onPress: () {
setState(() {
isSelected[i] = isSelected[i] ? false : true;
});
},
textColor: Colors.black,
selected: isSelected[i],
),
);
}
if (list.length > 3) {
return Center(
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
widget[0],
widget[1],
widget[2],
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [widget[3], widget[4], widget[5]])
]),
);
} else {
return Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: widget,
),
);
}
}
}
按钮计数将决定在列表中得到的API计数,所以我有一个虚拟的名单在这里
import 'package:kalakumbh/widgets/subcategories.dart';
import 'package:kalakumbh/widgets/textfield.dart';
import '../../widgets/categoriesbutton.dart';
class CategoriesScreen extends StatefulWidget {
const CategoriesScreen({super.key});
@override
State<CategoriesScreen> createState() => _CategoriesScreenState();
}
class _CategoriesScreenState extends State<CategoriesScreen> {
List<bool> isExpanded = [
false,
false,
false,
false,
false,
false,
false,
false,
false
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
textField(categories, categoriesHint, TextInputType.name, null),
75.heightBox,
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CategoriesButton().categoriesbutton(
color: Colors.orange,
title: categoryone,
textColor: Colors.black,
selected: isExpanded[0],
onPress: () {
setState(() {
isExpanded[0] = isExpanded[0] ? false : true;
isExpanded[1] = false;
isExpanded[2] = false;
});
},
),
CategoriesButton().categoriesbutton(
color: Colors.orange,
title: categoryone,
textColor: Colors.black,
selected: isExpanded[1],
onPress: () {
setState(() {
isExpanded[1] = isExpanded[1] ? false : true;
isExpanded[0] = false;
isExpanded[2] = false;
});
},
),
CategoriesButton().categoriesbutton(
color: Colors.orange,
title: categoryone,
textColor: Colors.black,
selected: isExpanded[2],
onPress: () {
setState(() {
isExpanded[2] = isExpanded[2] ? false : true;
isExpanded[1] = false;
isExpanded[0] = false;
});
},
),
],
),
15.heightBox,
if (isExpanded[0] || isExpanded[1] || isExpanded[2])
const SubCategories(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CategoriesButton().categoriesbutton(
color: Colors.orange,
title: categoryone,
textColor: Colors.black,
selected: isExpanded[3],
onPress: () {
setState(() {
isExpanded[3] = isExpanded[3] ? false : true;
isExpanded[4] = false;
isExpanded[5] = false;
});
},
),
CategoriesButton().categoriesbutton(
color: Colors.orange,
title: categoryone,
textColor: Colors.black,
selected: isExpanded[4],
onPress: () {
setState(() {
isExpanded[4] = isExpanded[4] ? false : true;
isExpanded[3] = false;
isExpanded[5] = false;
});
},
),
CategoriesButton().categoriesbutton(
color: Colors.orange,
title: categoryone,
textColor: Colors.black,
selected: isExpanded[5],
onPress: () {
setState(() {
isExpanded[5] = isExpanded[5] ? false : true;
isExpanded[4] = false;
isExpanded[3] = false;
});
},
),
],
),
15.heightBox,
if (isExpanded[3] || isExpanded[4] || isExpanded[5])
const SubCategories(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CategoriesButton().categoriesbutton(
color: Colors.orange,
title: categoryone,
textColor: Colors.black,
selected: isExpanded[6],
onPress: () {
setState(() {
isExpanded[6] = isExpanded[6] ? false : true;
isExpanded[7] = false;
isExpanded[8] = false;
});
},
),
CategoriesButton().categoriesbutton(
color: Colors.orange,
title: categoryone,
textColor: Colors.black,
selected: isExpanded[7],
onPress: () {
setState(() {
isExpanded[7] = isExpanded[7] ? false : true;
isExpanded[6] = false;
isExpanded[8] = false;
});
},
),
CategoriesButton().categoriesbutton(
color: Colors.orange,
title: categoryone,
textColor: Colors.black,
selected: isExpanded[8],
onPress: () {
setState(() {
isExpanded[8] = isExpanded[8] ? false : true;
isExpanded[7] = false;
isExpanded[6] = false;
});
},
),
],
),
15.heightBox,
if (isExpanded[6] || isExpanded[7] || isExpanded[8])
const SubCategories(),
],
),
)
.box
.rounded
.padding(const EdgeInsets.all(16))
.width(context.screenWidth)
.make(),
);
}
}
我还需要限制的选择,以3个主要类别和2个子类别,每一个它已经很长一段时间,我对这个问题卡住了,我不知道如何解决这个问题
1条答案
按热度按时间ecbunoof1#
在您的
_CategoriesScreenState
中,您知道如何处理状态,但您似乎忘记了如何在SubCategoriesState
中处理状态。从构建方法中删除局部变量。检查它们是否是小部件的 * 状态 *。如果是(例如
isSelected
),则将它们向上移动并使它们成为状态本身的属性。