创建五个按钮在flutter只有一个按钮应该按下一次当点击按钮的颜色应该改变也重构小部件

carvr3hs 于 2023-01-05 发布在 Flutter

关注(0)|答案(1)|浏览(147)

在flutter中创建一行五个按钮，这样一次只能按下一个按钮，当按钮被按下时，它的颜色应该从白色变为红色，文本颜色也是如此，还重构了按钮控件。
我用过材料按钮，但问题是，当只按一个按钮时，所有按钮的重置都会自动按下，而且不会再次取消点击
代码

class SizeButton extends StatefulWidget {
  String text;
  bool small = false;
  bool medium = false;
  bool large = false;
  bool extraLarge = false;

  SizeButton({Key? key, required this.text}) : super(key: key);

  @override
  State<SizeButton> createState() => SizeButtonState();

}

class SizeButtonState extends State<SizeButton> {
  bool isClicked = false;

  void selectSize(String size) {
    setState(() {
      if (size == 'S') {
        widget.small = !widget.small;
        widget.medium = false;
        widget.large = false;
        widget.extraLarge = false;
      } else if (size == 'M') {
        widget.small = false;
        widget.medium = !widget.medium;
        widget.large = false;
        widget.extraLarge = false;
      } else if (size == 'L') {
        widget.small = false;
        widget.medium = false;
        widget.large = !widget.large;
        widget.extraLarge = false;
      } else if (size == 'XL') {
        widget.small = false;
        widget.medium = false;
        widget.large = false;
        widget.extraLarge= !widget.extraLarge;
      }
      isClicked = widget.small || widget.medium || widget.large || widget.extraLarge;
    });
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        width: 40,
        height: 40,
        decoration: BoxDecoration(
          border:Border.all(color: Colors.grey, width: 1.w),
          shape: BoxShape.circle,
          color: isClicked ? Colors.pink : Colors.white,
        ),
        child: Center(
          child: Text(widget.text,
            style: TextStyle(
              fontSize: 20.sp,
              color: isClicked ? Colors.white : Colors.black,
            ),
          ),
        ),
      ),
      onTap: () {
        selectSize(widget.text);
      },
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/75016756/create-five-button-in-flutter-only-one-button-should-be-pressed-at-once-when-cli

1条答案

按热度按时间

kcwpcxri1#

创建dataModel类

class DataModel {
  String button;
  bool isSelected;

  DataModel(this.button, this.isSelected);
}

放置微件类，如下所示

class RecordChaseMoneyPage extends StatefulWidget {
  const RecordChaseMoneyPage({super.key});

  @override
  State<RecordChaseMoneyPage> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<RecordChaseMoneyPage> {
  List<DataModel> list = [];

  @override
  void initState() {
    super.initState();

    list.add(DataModel("1", false));
    list.add(DataModel("2", false));
    list.add(DataModel("3", false));
    list.add(DataModel("4", false));
    list.add(DataModel("5", false));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: SizedBox(
          height: 30,
          child: ListView.separated(
              scrollDirection: Axis.horizontal,
              itemBuilder: (c, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      if (!list[index].isSelected) {
                        list[index].isSelected = true;
                      }
                    });
                  },
                  child: Container(
                    height: 20,
                    width: 40,
                    color: list[index].isSelected ? Colors.red : Colors.blue,
                  ),
                );
              },
              separatorBuilder: (c, i) {
                return const SizedBox(width: 10);
              },
              itemCount: list.length),
        ),
      ),
    );
  }
}

如果要选择列表中单个项目，请更改ontap方法

setState(() {
                    list[index].isSelected = !list[index].isSelected;

                    for (var i = 0; i < list.length; i++) {
                      if (i != index) {
                        list[i].isSelected = false;
                      }
                    }

                  });

赞(0）回复(0）举报 2023-01-05

我来回答

创建五个按钮在flutter只有一个按钮应该按下一次当点击按钮的颜色应该改变也重构小部件

1条答案

相关问题

热门标签

最新问答