如何在列表中选择的单个按钮上加边框

Question

我有一个按钮列表，我想要 select 其中之一，红色边框出现在点击时。再次点击，边框消失。我怎样才能做到这一点？据我所知，当我单击它时，它会立即圈出列表中的所有按钮。请教教我

Answer 1

首先，您必须为您的按钮创建一个 stateful widget，用于跟踪它是否应该显示边框。它应该是这样的：

class MyButton extends StatefulWidget {
  @override
  _MyButtonState createState() => _MyButtonState();

  final Widget child;
  final void Function() onPressed;
  final Key key;
  final Color buttonPrimaryColor, buttonOnPrimaryColor, borderColor;
  final double borderWidth;
  MyButton({
    @required this.child,
    this.onPressed,
    this.key,
    this.borderColor = Colors.red,
    this.buttonPrimaryColor,
    this.buttonOnPrimaryColor,
    this.borderWidth = 1.0,
  });
}

class _MyButtonState extends State<MyButton> {
  bool showBorder = false;
  void toggleShowBorder() => setState(() => showBorder = !showBorder);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      key: widget.key,
      onPressed: widget.onPressed == null
          ? null
          : () {
              toggleShowBorder();
              widget.onPressed();
            },
      child: widget.child,
      style: ButtonStyle(
        // If showBorder == true, we show a red border
        shape: MaterialStateProperty.resolveWith(
          (_) => showBorder
              ? RoundedRectangleBorder(
                  borderRadius: BorderRadius.zero,
                  side: BorderSide(
                    color: widget.borderColor,
                    width: widget.borderWidth,
                  ),
                )
              : RoundedRectangleBorder(),
        ),
      ).merge(
        ElevatedButton.styleFrom(
          primary: widget.buttonPrimaryColor ??
              Theme.of(context).buttonTheme.colorScheme.primary,
          onPrimary: widget.buttonOnPrimaryColor ??
              Theme.of(context).buttonTheme.colorScheme.onPrimary,
        ),
      ),
    );
  }
}

用法很简单：

MyButton(
  child: Text('Press me'),
  onPressed: () {},
),

如果你想改变按钮的颜色，你可以通过传入参数来实现：

MyButton(
  borderColor: Colors.amber,
  buttonPrimaryColor: Colors.white,
  buttonOnPrimaryColor: Colors.black,
  child: Text('Press me'),
  onPressed: () {},
),

使用 buttonPrimaryColor 作为按钮的背景颜色使用 buttonOnPrimaryColor 作为按钮的前景色使用 borderColor 作为按钮的边框颜色（默认为红色）

您还可以使用 borderWidth 参数更改边框宽度，如下所示：（默认为 1.0）

MyButton(
  borderWidth: 4.0,
  child: Text('Press me'),
  onPressed: () {},
),

传入一个 key 参数也是个好主意，因为你正在工作带有按钮列表，如下所示：

MyButton(
  key: Key('some unique key'),
  child: Text('Press me'),
  onPressed: () {},
),

密钥应该是唯一的字符串。

如何在列表中选择的单个按钮上加边框

how to bordered a single button on selected in list

select

list

border

flutter