Question

当单击按钮时，该按钮将变为灰色。发生这种情况，但问题是当按下一个按钮时，所有按钮都会变成我不想要的灰色。我一次只想要一个。

var pressed = false;
  Widget BuildButton(
    String buttonText,
  ) {
    MainAxisAlignment.spaceEvenly;
    return new Expanded(
        child: new FlatButton(
            shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(
                  15.0,
                ),
                side: BorderSide(color: Colors.black)),
            color: pressed ? Colors.grey : Colors.white, // colour change when clicked
            textColor: Colors.black,
            padding: EdgeInsets.all(6.0),
            child: new Text(buttonText),
            onPressed: () {
              setState(() {
                pressed = !pressed;
              });
            }));

          Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [ // buttons start here
                    BuildButton("XXS"),
                    BuildButton("XS"),
                    BuildButton("S"),
                    BuildButton("M"),
                  ]),



                  ]),

Answer 1

问题在于您在所有变量中都使用了按下变量，因此当您更改按下值的值时，所有按钮都会更改其颜色。

您可以创建一个列表，其中包含每个按钮的按下值。

List<bool> pressed = [false, false, false, false];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                BuildButton("XXS", 0),
                BuildButton("XS", 1),
                BuildButton("S", 2),
                BuildButton("M", 3),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget BuildButton(String buttonText, int index) {
    return new Expanded(
      child: new FlatButton(
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(
              15.0,
            ),
            side: BorderSide(color: Colors.black)),
        color: pressed[index]
            ? Colors.grey
            : Colors.white, // colour change when clicked
        textColor: Colors.black,
        padding: EdgeInsets.all(6.0),
        child: new Text(buttonText),
        onPressed: () {
          setState(() {
            pressed[index] = !pressed[index];
          });
        },
      ),
    );
  }

Answer 2

每个按钮都需要一个具有不同“按下”状态的映射。

Map<String, bool> pressed = {};
Widget BuildButton(
String buttonText,
) {
    return new Expanded(
        child: new FlatButton(
            color: pressed['buttonText] == true ? Colors.grey : Colors.white, // colour change when clicked
            textColor: Colors.black,
            padding: EdgeInsets.all(6.0),
            child: new Text(buttonText),
            onPressed: () {
              setState(() {
                pressed['buttonText'] = !(pressed['buttonText'] ?? false);
              });
            },
          ),
      );
}

Answer 3

我建议将BuildButton函数移到其自己的StatefulWidget中，这样，每次创建新按钮时，该按钮将负责管理其自身的状态。

我也将Expanded小部件移出了新的BuildButton小部件，以使其更可重用。 Expanded小部件只能在Row和Column内部使用。现在您的按钮可以在任何地方使用！

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    ),
  );
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            BuildButton("XXS"),
            BuildButton("XS"),
            BuildButton("S"),
            BuildButton("M"),
          ].map((item) => Expanded(child: item)).toList(),
        ),
      ],
    );
  }
}

class BuildButton extends StatefulWidget {
  final String buttonText;

  const BuildButton(this.buttonText);

  @override
  _BuildButtonState createState() => _BuildButtonState();
}

class _BuildButtonState extends State<BuildButton> {
  bool pressed = false;

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: () => setState(() => pressed = !pressed),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
        side: BorderSide(color: Colors.black),
      ),
      color: pressed ? Colors.grey : Colors.white, // colour change when clicked
      textColor: Colors.black,
      padding: EdgeInsets.all(6.0),
      child: Text(widget.buttonText),
    );
  }
}

专业提示

使用结尾逗号来使dart格式化程序帮助您保持代码可读性。

单击时，我如何停止所有更改其状态的构建按钮

3 个答案:

专业提示