如何在 Flutter 中制作单选自定义按钮答案

【问题标题】：How to make Single Selectable custom button in Flutter如何在 Flutter 中制作单选自定义按钮
【发布时间】：2022-11-10 23:39:09
【问题描述】：

我是 Flutter 开发的新手，我正在练习航空公司预订的应用程序，用户必须通过点击按钮选择飞机机舱。所以，我不知道提到的按钮和背景功能的类型，有人可以帮助我吗？

import 'package:flutter/material.dart';

class MyToogleButtons extends StatefulWidget {
  const MyToogleButtons({Key? key}) : super(key: key);

  @override
  State<MyToogleButtons> createState() => _MyToogleButtonsState();
}

class _MyToogleButtonsState extends State<MyToogleButtons> {
  List<bool> isSelected = [true, false, false];

  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      fillColor: Theme.of(context).primaryColor,
      borderColor: Theme.of(context).primaryColor,
      direction: Axis.horizontal,
      isSelected: isSelected,
      children: [
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 6),
          decoration: BoxDecoration(
              color: Colors.transparent,
              border: Border.all(
                color: Theme.of(context).primaryColor,
              )),
          child: Text(
            "Economy",
            style: TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 32.0,
            ),
          ),
        ),
        Text(
          "Economy",
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 12.0,
          ),
        ),
        Text(
          "Economy",
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 12.0,
          ),
        ),
      ],
    );
  }
}

【问题讨论】：

嗨 Faheem，您能否将其缩小到我们可以解决的具体问题？另外，您可以编辑它以修复您的代码格式吗？
请修剪您的代码，以便更容易找到您的问题。请按照以下指南创建minimal reproducible example。

标签： flutter flutter-layout flutter-animation

【解决方案1】：

您可以在ToggleButtons 上调用onPressed 方法并使用like

isSelected: isSelected,
onPressed: (index) {
  for (int i = 0; i < isSelected.length; i++) {
    isSelected[i] = i == index;
  }
  setState(() {});
},

完整的小部件

class MyToogleButtons extends StatefulWidget {
  const MyToogleButtons({Key? key}) : super(key: key);

  @override
  State<MyToogleButtons> createState() => _MyToogleButtonsState();
}

class _MyToogleButtonsState extends State<MyToogleButtons> {
  List<bool> isSelected = [true, false, false];

  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      fillColor: Theme.of(context).primaryColor,
      borderColor: Theme.of(context).primaryColor,
      direction: Axis.horizontal,
      isSelected: isSelected,
      onPressed: (index) {
        for (int i = 0; i < isSelected.length; i++) {
          isSelected[i] = i == index;
        }
        setState(() {});
      },
      children: [
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 6),
          decoration: BoxDecoration(
              color: Colors.transparent,
              border: Border.all(
                color: Theme.of(context).primaryColor,
              )),
          child: Text(
            "Economy",
            style: TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 32.0,
            ),
          ),
        ),
        Text(
          "Economy",
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 12.0,
          ),
        ),
        Text(
          "Economy",
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 12.0,
          ),
        ),
      ],
    );
  }
}

【讨论】：