ToggleButtons，Flutter：如何更改边框颜色和边框半径

Question

我有三个ToggleButton，我正在尝试找出如何更改所选按钮边框的颜色。正如您在我的图片中看到的那样，左侧的绿色按钮周围有一个非常难以看清的淡蓝色边框，因为它是选定的按钮。我想知道如何更改这个颜色，并且如何使边框的角落变圆。

如果有帮助的话，“CryptoCard”是使用Card类创建的。

这是我的代码：

Center(
                          child: ToggleButtons(
                              borderWidth: 0,
                              splashColor: Colors.yellow,
                              renderBorder: false,
                              children: <Widget>[
                                CryptoCard(
                                    selectedCurrency,
                                    snapshot.connectionState ==
                                            ConnectionState.waiting
                                        ? '---'
                                        : coinData[0],
                                    'Bitcoin'),
                                CryptoCard(
                                    selectedCurrency,
                                    snapshot.connectionState ==
                                            ConnectionState.waiting
                                        ? '---'
                                        : coinData[1],
                                    'Ethereum'),
                                CryptoCard(
                                    selectedCurrency,
                                    snapshot.connectionState ==
                                            ConnectionState.waiting
                                        ? '---'
                                        : coinData[2],
                                    'Litecoin'),
                              ],
                              onPressed: (int index) {
                                setState(() {
                                  for (int buttonIndex = 0;
                                      buttonIndex < isSelectedCrypto.length;
                                      buttonIndex++) {
                                    if (buttonIndex == index) {
                                      isSelectedCrypto[buttonIndex] = true;
                                      selectedCrypto =
                                          cryptoAbbreviation[buttonIndex];
                                      print("selectedCrypto");
                                      print(selectedCrypto);
                                    } else {
                                      isSelectedCrypto[buttonIndex] = false;
                                    }
                                  }
                                });

                                futureData = getData();
                              },
                              isSelected: isSelectedCrypto))

- CuriousCoder

Answer 1

有一个属性selectedBorderColor，您可以使用它来设置所选按钮的边框颜色。您可以使用自定义小部件为每个单独的按钮提供圆角边框。

请参见下面的代码：

import 'package:flutter/material.dart';

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<bool> isSelected = List.generate(6, (index) => false);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ToggleButtons(
          children: [
            CustomIcon(
              icon: const Icon(Icons.ac_unit),
              isSelected: isSelected[0],
              bgColor: const Color(0xfff44336),
            ),
            CustomIcon(
              icon: const Icon(Icons.call),
              isSelected: isSelected[1],
              bgColor: const Color(0xffE91E63),
            ),
            CustomIcon(
              icon: const Icon(Icons.cake),
              isSelected: isSelected[2],
              bgColor: const Color(0xff9C27B0),
            ),
            CustomIcon(
              icon: const Icon(Icons.add),
              isSelected: isSelected[3],
              bgColor: const Color(0xff673AB7),
            ),
            CustomIcon(
              icon: const Icon(Icons.accessibility),
              isSelected: isSelected[4],
              bgColor: const Color(0xff3F51B5),
            ),
            CustomIcon(
              icon: const Icon(Icons.analytics),
              isSelected: isSelected[5],
              bgColor: const Color(0xff2196F3),
            ),
          ],
          onPressed: (int index) {
            setState(() {
              for (int buttonIndex = 0;
                  buttonIndex < isSelected.length;
                  buttonIndex++) {
                if (buttonIndex == index) {
                  isSelected[buttonIndex] = !isSelected[buttonIndex];
                } else {
                  isSelected[buttonIndex] = false;
                }
              }
            });
          },
          isSelected: isSelected,
          selectedColor: Colors.amber,
          renderBorder: false,
          fillColor: Colors.transparent,
        ),
      ),
    );
  }
}

class CustomIcon extends StatefulWidget {
  final Icon icon;
  final bool isSelected;
  final Color bgColor;

  const CustomIcon(
      {Key key,
      this.icon,
      this.isSelected = false,
      this.bgColor = Colors.green})
      : super(key: key);
  @override
  _CustomIconState createState() => _CustomIconState();
}

class _CustomIconState extends State<CustomIcon> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 47,
      height: 47,
      decoration: BoxDecoration(
        border: widget.isSelected
            ? Border.all(
                color: const Color(0xffC5CAE9),
              )
            : null,
        borderRadius: const BorderRadius.all(
          Radius.circular(10),
        ),
      ),
      child: Center(
        child: Container(
          height: 32,
          width: 32,
          decoration: BoxDecoration(
            color: widget.bgColor,
            borderRadius: const BorderRadius.all(
              Radius.circular(5),
            ),
          ),
          child: widget.icon,
        ),
      ),
    );
  }
}

- bluenile

---

我尝试使用selectedBorderColor，但它对我没有任何改变。当我指定selectedBorderColor时，我的外边框仍然是淡蓝色。此外，我想知道如何将按钮的外边框角落变圆，而不是如何使按钮的角落变圆。 - CuriousCoder

您可以通过设置borderRadius属性来使整个ToggleButton的边框变圆。请注意，这将应用于整个ToggleButton的边框，而不是单个按钮。我已经在此URL上创建了一个包含以上代码的Dartpad - https://dartpad.dev/5897768e2ba049807141f783d5fdbfc0 - bluenile

我已经在我的按钮上设置了圆角。我想知道如何更改所选按钮周围淡蓝色的颜色以及如何使所选按钮周围的淡蓝色也有圆角。您的Dartpad示例与我的一样，都有相同的淡蓝色环绕所选按钮。 - CuriousCoder

你是在问闪屏颜色吗？请再次查看Dartpad，我已经稍微更新了一下代码 - https://dartpad.dev/5897768e2ba049807141f783d5fdbfc0 - bluenile

当你悬停时，看到的淡色是悬停颜色。以下是在轻触或指针悬停期间看到的各种颜色。highlightColor → InkWell 按钮的高亮颜色。 hoverColor → 当按钮上有指针悬停时用于填充按钮的颜色。 focusColor → 当按钮具有输入焦点时用于填充按钮的颜色。 splashColor → InkWell 按钮的涟漪颜色。请参阅 https://api.flutter.dev/flutter/material/ToggleButtons-class.html。同时请查看 https://dartpad.dev/5897768e2ba049807141f783d5fdbfc0。 - bluenile

Answer 2

我相信这不是最好的，但这是我的代码，也许它能帮助到某个人。 如果你需要在不同的颜色中只需要一个选定的按钮被着色，就像这样。

Color mColor = Color(0xFF6200EE),mColor0 = Color(0xFF6200EE),mColor1 = Color(0xFF6200EE);
final isSelected = <bool>[false, false, false];

那么

ToggleButtons(
              color: Colors.black.withOpacity(0.60),
              selectedColor: mColor,
              selectedBorderColor: mColor0,
              fillColor: mColor1.withOpacity(0.08),
              splashColor: Colors.grey.withOpacity(0.12),
              hoverColor: Color(0xFF6200EE).withOpacity(0.04),
              borderRadius: BorderRadius.circular(4.0),
              constraints: BoxConstraints(minHeight: 36.0),
              isSelected: isSelected,
              onPressed: (index) {
                // Respond to button selection
                setState(() {
                  isSelected[0] = false;
                  isSelected[1] = false;
                  isSelected[2] = false;
                  if (index == 0) {
                    mColor = Colors.blue;
                    mColor0 = Colors.blue;
                    mColor1 = Colors.blue;
                  }
                  if (index == 1) {
                    mColor = Colors.green;
                    mColor0 = Colors.green;
                    mColor1 = Colors.green;
                  }
                  if (index == 2) {
                    mColor = Colors.red;
                    mColor0 = Colors.red;
                    mColor1 = Colors.red;
                  }
                  isSelected[index] = !isSelected[index];
                });
              },
              children: [
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  child: Text(
                    'BUTTON 1',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  child: Text(
                    'BUTTON 2',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  child: Text(
                    'BUTTON 3',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
              ],
            ),

- hararot so