Flutter:两行中的ToggleButton子项

fykwrbwg  于 2023-04-22  发布在  Flutter
关注(0)|答案(1)|浏览(105)

我有一个带有10个文本小部件的ToggleButton。但是,我希望它们分两行,第一行包含数字1到5,第二行包含数字6到10。如何才能实现这一点?
就像:-

h9a6wy2h

h9a6wy2h1#

你可以使用两个ToogleButtons。我使用一个bool列表作为值。

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

  @override
  State<GS4> createState() => _GS4State();
}

class _GS4State extends State<GS4> {
  List<bool> selected = List.generate(10, (index) => false);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ToggleButtons(
            isSelected: selected.sublist(0, 5),
            onPressed: (index) {
              setState(() {
                selected[index] = !selected[index];
              });
            },
            children: List.generate(5, (index) => Text("${index + 1}")),
          ),
          ToggleButtons(
            isSelected: selected.sublist(5),
            onPressed: (index) {
              setState(() {
                selected[index + 5] = !selected[index + 5];
              });
            },
            children: List.generate(5, (index) => Text("${index + 6}")),
          ),
        ],
      ),
    );
  }
}

相关问题