dart 我想呈现选定的按钮与刻度线,但它没有发生

jvidinwx  于 2023-05-04  发布在  其他
关注(0)|答案(1)|浏览(128)

当我点击按钮时,应该会出现一个勾选,当我点击稍后出现的按钮时,不会发生这种情况

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个子类别,每一个它已经很长一段时间,我对这个问题卡住了,我不知道如何解决这个问题

ecbunoof

ecbunoof1#

在您的_CategoriesScreenState中,您知道如何处理状态,但您似乎忘记了如何在SubCategoriesState中处理状态。
从构建方法中删除局部变量。检查它们是否是小部件的 * 状态 *。如果是(例如isSelected),则将它们向上移动并使它们成为状态本身的属性。

相关问题