通过颤振中的单选按钮更改升高的按钮颜色

Question

我想在按下单选按钮时更改提升按钮的颜色。 1.button -> 红色，2.button -> 黄色，3.button -> 绿色。在 Elevated.stylefrom if 条件不起作用。仅三元条件有效，但仅适用于一种条件。我想添加3个条件。我希望已经清楚了。

或者我需要为此创建一个模型吗？

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:task_shopping_app/const/const.dart';
import 'package:task_shopping_app/screens/city_input_screen.dart';
import 'package:task_shopping_app/screens/weather.dart';

class RadioButton extends StatefulWidget {
  @override
  _RadioButtonState createState() => _RadioButtonState();
}

class _RadioButtonState extends State<RadioButton> {
  int selectedValue = 0;
  final enteredCityInfo = TextEditingController();
  String name = '';
  // if selectedValue and group value matches then radio button will be selected.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          ButtonBar(
            alignment: MainAxisAlignment.center,
            children: <Widget>[
              Radio<int>(
                  value: 1,
                  groupValue: selectedValue,
                  onChanged: (value) => setState(() {
                        selectedValue = value!;
                        print(selectedValue);
                      })),
              Radio<int>(
                  value: 2,
                  groupValue: selectedValue,
                  onChanged: (value) => setState(() {
                        selectedValue = value!;
                        print(selectedValue);
                      })),
              Radio<int>(
                  value: 3,
                  groupValue: selectedValue,
                  onChanged: (value) => setState(() {
                        selectedValue = value!;
                        print(selectedValue);
                      })),
            ],
          ),
          Padding(
            padding: const EdgeInsets.all(25.0),
            child: TextField(
              controller: enteredCityInfo,
            ),
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                name = enteredCityInfo.text;
                //Here we want to see user entry for the text field area in the debug console.
                print(name);
                // Get.to(() => WeatherScreen());
              });
            },
            child: Text('Create'),
            style: ElevatedButton.styleFrom(
              primary: selectedValue == 1 ? Colors.red : Colors.yellow,
            ),
          )
        ],
      ),
    );
  }
}

enter code here

Answer 1

我认为你可以创建一个函数将值转换为 Colors

Color valueToColor(int value) {
  switch (value) {
    case 1:
      return Colors.red;
    case 2:
      return Colors.yellow;
    case 3:
      return Colors.green;
    default:
      /// return whatever you like to deal with some exceptional case
  }
}

并使ElevatedButton的style参数如下

style: ElevatedButton.styleFrom(
              primary: valueToColor(selectedValue),
            ),

Answer 2

在多个条件下像这样使用：

primary:(selectedValue == 1) ? Colors.red : (selectedValue == 2)? 
Colors.yellow:Colors.green,

通过颤振中的单选按钮更改升高的按钮颜色

Change elevated button color via radio buttons in flutter

if-statement

colors

radio-button

dart

flutter