Question

我不熟悉flutter / dart，也不熟悉面向对象编程。

我有一个带有两个蓝色按钮的简单屏幕，当用户单击这些按钮之一时，该按钮应变为绿色，但是，当单击这些按钮之一时，两个按钮均变为绿色。

如何修复我的代码，以便仅单击的按钮可以更改颜色。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  Color _buttonColor = Colors.blue;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        backgroundColor: Colors.grey[400],
        body: SafeArea(
          child: Center(
            child: Container(
              child: Column(
                children: <Widget>[

                  RaisedButton(
                    color: _buttonColor,
                    onPressed: () {
                      setState(() {
                       _buttonColor = Colors.green;
                      });
                    },
                  ),

                  RaisedButton(
                    color: _buttonColor,
                    onPressed: () {
                      setState(() {
                        _buttonColor = Colors.green;
                      });
                    },
                  )

                ],
              ),
            )
          ),
        )
    );
  }
}

Answer 1

每种按钮颜色都需要一个变量：

变量

Color _buttonColor1 = Colors.blue;
Color _buttonColor2 = Colors.red;

小部件

RaisedButton(
  color: _buttonColor1,
  onPressed: () {
    setState(() {
      _buttonColor1 = Colors.green;
    });
  },
),

RaisedButton(
  color: _buttonColor2,
  onPressed: () {
    setState(() {
      _buttonColor2 = Colors.orange;
    });
  },
)

Answer 2

您已经Color _buttonColor = Colors.blue;告诉两个小部件都使用_buttonColor来设置颜色。您将两个RaisedButtons的color属性设置为指向相同的变量color: _buttonColor。

在setState()中，两个小部件都将用绿色重建。

我建议使用两个顶级变量，例如_buttonColor1和_buttonColor2。并在一个RaisedButton小部件中使用变量之一，在第二个RaisedButton小部件中使用第二变量。有道理吗？

Answer 3

之所以发生这种情况，是因为两个按钮都从同一个变量_buttonColor获得其color属性。您应该使用单独的变量。

单击后如何更改单个按钮的颜色

3 个答案: