Question

我连续有两个单选按钮。我想将第一个按钮的颜色更改为其他颜色，如果按下第二个按钮，则第一个按钮应恢复为默认颜色，第二个按钮应恢复为新颜色。我通过编写以下代码来做到这一点。但是两个按钮都一起改变颜色。即使按下一个按钮，两个按钮在按下时都变成绿色。

按钮1：

bool isButtonPressed = false;

Widget startupButton() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(15.0),
      child: SizedBox(
        height: 150,
        width: MediaQuery
            .of(context)
            .size
            .width * 0.45,

        child: RaisedButton(
          color: isButtonPressed ? Colors.green : Colors.red,
          onPressed: () {
            setState(() {
              isButtonPressed =!isButtonPressed;
            });
          },

          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 20.0),
                child: Text('Startup Pack',
                    style: TextStyle(fontSize: 15, color: Colors.black)),
              ),
              Text('Introductory Offer',
                  style: TextStyle(fontSize: 12, color: Colors.black)),
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[

                      Text(
                        "\$$dollars",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 20,
                            decoration: TextDecoration.lineThrough),
                      ),
                      SizedBox(width: 5),
                      Text(
                        "\$$dollars2",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 20,
                            color: primaryColor),
                      ),
                    ]),
              ),

              Text(
                "Per year",
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 13,
                    color: blackColor),
              ),
              Text(
                "Billed anually",
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 13,
                    color: blackColor),
              ),
            ],
          ),


        ),

      ),
    );
  }

按钮2：


bool isButtonPressed = false;
Widget freeButton() {
      return
        ClipRRect(
        borderRadius: BorderRadius.circular(15.0),
        child: SizedBox(
          height: 150,
          width: MediaQuery.of(context).size.width * 0.45,

          child: RaisedButton(
            color: isButtonPressed ? Colors.green : Colors.red,
            onPressed: () {
              setState(() {
                isButtonPressed =!isButtonPressed;
              });
            },


            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 20.0),
                  child: Text('Stunning Solo', style: TextStyle(fontSize: 15,color: Colors.black)),
                ),
                Text('Free Forever', style: TextStyle(fontSize: 12,color: Colors.black)),
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[

                        Text(
                          "\$$dollars3",
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 20,
                              color: blackColor),
                        ),
                        SizedBox(width: 5),

                      ]),
                ),

                Text(
                  "Free forever",
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 13,
                      color: blackColor),
                ),

              ],
            ),


          ),

        ),
      );


    }

Answer 1

您可以使用此代码。

import 'package:flutter/material.dart';

bool button1 = false;
bool button2 = false;

class Page0 extends StatefulWidget {
  @override
  _Page0State createState() => _Page0State();
}

class _Page0State extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        startupButton(context, setState),
        freeButton(context, setState)
      ],
    );
  }
}

Widget startupButton(context, setState) {
  return ClipRRect(
    borderRadius: BorderRadius.circular(15.0),
    child: SizedBox(
      height: 150,
      width: MediaQuery.of(context).size.width * 0.45,
      child: RaisedButton(
        color: button1 ? Colors.green : Colors.red,
        onPressed: () {
          setState(() {
            button1 = true;
            button2 = false;
          });
        },
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 20.0),
              child: Text('Startup Pack',
                  style: TextStyle(
                      fontSize: 15,
                      color: button1 ? Colors.white : Colors.black)),
            ),
            Text('Introductory Offer',
                style: TextStyle(
                    fontSize: 12,
                    color: button1 ? Colors.white : Colors.black)),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "\$dollars",
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          decoration: TextDecoration.lineThrough,
                          color: button1 ? Colors.white : Colors.black),
                    ),
                    SizedBox(width: 5),
                    Text(
                      "\$dollars2",
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          color: button1 ? Colors.white : Colors.black),
                    ),
                  ]),
            ),
            Text(
              "Per year",
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 13,
                  color: button1 ? Colors.white : Colors.black),
            ),
            Text(
              "Billed anually",
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 13,
                  color: button1 ? Colors.white : Colors.black),
            ),
          ],
        ),
      ),
    ),
  );
}

Widget freeButton(context, setState) {
  return ClipRRect(
    borderRadius: BorderRadius.circular(15.0),
    child: SizedBox(
      height: 150,
      width: MediaQuery.of(context).size.width * 0.45,
      child: RaisedButton(
        color: button2 ? Colors.green : Colors.red,
        onPressed: () {
          setState(() {
            button1 = false;
            button2 = true;
          });
        },
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 20.0),
              child: Text('Stunning Solo',
                  style: TextStyle(
                      fontSize: 15,
                      color: button2 ? Colors.white : Colors.black)),
            ),
            Text('Free Forever',
                style: TextStyle(
                    fontSize: 12,
                    color: button2 ? Colors.white : Colors.black)),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "\$dollars3",
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          color: button2 ? Colors.white : Colors.black),
                    ),
                    SizedBox(width: 5),
                  ]),
            ),
            Text(
              "Free forever",
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 13,
                  color: button2 ? Colors.white : Colors.black),
            ),
          ],
        ),
      ),
    ),
  );
}

按下时更改按钮的颜色，并在按下时释放颤动，然后恢复为原始颜色

1 个答案: