顫動中凸起按鈕的 OnPressed 中的顏色變化

Question

“當您從下拉菜單中選擇一種顏色時，下拉按鈕小部件的標題會顯示選定的顏色。然后，當您點擊四個按鈕之一時，只有該特定按鈕的背景顏色會更改為選定的背景顏色。 ” 這就是我想要做的。

這張圖顯示了屏幕。 DropdownButton 中有 4 種顏色選項。 一開始，我為 get "Colors.black" 等制作了地圖。然后我編寫了一個名為 "change" 的函數，這個函數用於調色板。

但是我對在哪里調用這個函數感到困惑。 RaisedButtons 的 onPressed 部分現在是空的。 在第一個 RaisedButton 中，

_favIconColor = ;

那部分將等於新顏色。 但我無法在任何地方調用該函數。

這是我的全部代碼：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}



class _MyAppState extends State<MyApp> {

String renk;
String decoration;
String x;
List<DropdownMenuItem> frommenuitems = [

DropdownMenuItem(child: Text('Black'),value: 'Black'),
DropdownMenuItem(child: Text('Green'),value: 'Green'),
DropdownMenuItem(child: Text('Orange'),value: 'Orange'),
DropdownMenuItem(child: Text('Blue'),value: 'Blue')];

final Map<String, int> renkmap = {  
  'Black': 0,  
  'Green': 1,  
  'Orange': 2,  
  'Blue': 3};

final Map<String, List> formulas = {  
  '0': [Colors.black],  
  '1': [Colors.green],  
  '2': [Colors.orange],  
  '3': [Colors.blue]};

void change(renk) {

  int newcolor = renkmap[renk];
  var result = formulas[newcolor];

}
Color _favIconColor = Colors.black; //for the set the RaisedButton color to the black in the beginning
@override

Widget build(BuildContext context) {
  final TextStyle header = TextStyle (fontSize: 30, color: Colors.red[500], fontWeight: FontWeight.bold);
  final TextStyle buttontext = TextStyle (fontSize: 25, color: Colors.white, fontWeight: FontWeight.bold);

  return MaterialApp(
    title: 'Color Changing',
    home: Scaffold(
  
    body: Container(
      child: Column(
        children: <Widget> [
          Spacer(), //flex property
          Text('Select a color', style: header),

          DropdownButton(items: frommenuitems, hint: Text('Black', style: TextStyle(color: Colors.black)),
           value: renk,
           onChanged: (value) {
             setState(() {
               renk = value;
               change(renk);  
             });
           }
           ),

           Spacer(), 
           ButtonTheme(
             minWidth: 2000.0,
             height: 100.0, 
             child: RaisedButton(child: Text('Change Color', style: buttontext), color: _favIconColor, 
             onPressed: () {
               setState(() {
                 
                 //_favIconColor = ;
               });

             })),


             ButtonTheme(
             minWidth: 2000.0,
             height: 100.0, 
             child: RaisedButton(child: Text('Change Color', style: buttontext), color: Colors.black, 
             onPressed: () {

             })),

             ButtonTheme(
             minWidth: 2000.0,
             height: 100.0, 
             child: RaisedButton(child: Text('Change Color', style: buttontext), color: Colors.black, 
             onPressed: () {})),

             ButtonTheme(
             minWidth: 2000.0,
             height: 100.0, 
             child: RaisedButton(child: Text('Change Color', style: buttontext), color: Colors.black, 
             onPressed: () {}))
            ],
          ),
      ),
    ),
  );}}

Answer 1

你應該做這個

_favIconColor = Colors.black;


ButtonTheme(
             minWidth: 2000.0,
             height: 100.0, 
             child: RaisedButton(child: Text('Change Color', style: buttontext), color: _favIconColor, 
             onPressed: () {
               setState(() {
                 
                 _favIconColor =newColor ;// the one selected from the drop down menu
               });

             })),

這里的問題是，每次更改顏色時，所有按鈕都將具有相同的顏色（因為 setState），如果這對您來說沒有問題，如果您希望每個按鈕都有自己的顏色，您應該考慮使用數組來了解哪個按鈕應該改變顏色

Ps：我不知道你的change函數是干什么用的！！ 它在這里沒有任何影響，除非它返回顏色值或代碼取決於您想如何使用它

Answer 2

我相信有很多更好的解決方案和更干凈的代碼。 但是對於臨時解決方法，您可以嘗試以下操作：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String renk;
  String decoration;
  String x;
  List<DropdownMenuItem> frommenuitems = [
    DropdownMenuItem(child: Text('Black'), value: 'Black'),
    DropdownMenuItem(child: Text('Green'), value: 'Green'),
    DropdownMenuItem(child: Text('Orange'), value: 'Orange'),
    DropdownMenuItem(child: Text('Blue'), value: 'Blue')
  ];

  final Map<String, int> renkmap = {
    'Black': 0,
    'Green': 1,
    'Orange': 2,
    'Blue': 3
  };

  final Map<String, List> formulas = {
    '0': [Colors.black],
    '1': [Colors.green],
    '2': [Colors.orange],
    '3': [Colors.blue]
  };

  Color _favIconColor = Colors.black;

  List<Color> _favIconColorList = [
    Colors.black,
    Colors.black,
    Colors.black,
    Colors.black
  ];

  int selectedIndex = -1;

  //for the set the RaisedButton color to the black in the beginning
  @override
  Widget build(BuildContext context) {
    void change(renk) {
      int newcolor = renkmap[renk];
      var result = formulas[newcolor.toString()][0];
      /**
     * In here, you need to convert int to string, and take the first of the Color list
     */

      // In here, if an item selected, then only it should be change.
      if (selectedIndex == -1) {
        _favIconColorList[0] = result;
        _favIconColorList[1] = result;
        _favIconColorList[2] = result;
        _favIconColorList[3] = result;
      } else {
          _favIconColorList[selectedIndex] = result;    
      }
    }

    final TextStyle header = TextStyle(
        fontSize: 30, color: Colors.red[500], fontWeight: FontWeight.bold);
    final TextStyle buttontext = TextStyle(
        fontSize: 25, color: Colors.white, fontWeight: FontWeight.bold);

    return MaterialApp(
      title: 'Color Changing',
      home: Scaffold(
        body: Container(
          child: Column(
            children: <Widget>[
              Spacer(), //flex property
              Text('Select a color', style: header),

              DropdownButton(
                  items: frommenuitems,
                  hint: Text("Color", style: TextStyle(color: _favIconColor)),
                  value: renk,
                  onChanged: (value) {
                    setState(() {
                      renk = value;
                      change(renk);
                    });
                  }),

              Spacer(),
              ButtonTheme(
                  minWidth: 2000.0,
                  height: 100.0,
                  child: RaisedButton(
                      child: Text('Change Color', style: buttontext),
                      color: _favIconColorList[0],
                      onPressed: () {
                        setState(() {
                          selectedIndex = 0;
                          //_favIconColor = ;
                        });
                      })),

              ButtonTheme(
                  minWidth: 2000.0,
                  height: 100.0,
                  child: RaisedButton(
                      child: Text('Change Color', style: buttontext),
                      color: _favIconColorList[1],
                      onPressed: () {
                        setState(() {
                          selectedIndex = 1;
                        });
                      })),

              ButtonTheme(
                  minWidth: 2000.0,
                  height: 100.0,
                  child: RaisedButton(
                      child: Text('Change Color', style: buttontext),
                      color: _favIconColorList[2],
                      onPressed: () {
                        setState(() {
                          selectedIndex = 2;
                        });
                      })),

              ButtonTheme(
                  minWidth: 2000.0,
                  height: 100.0,
                  child: RaisedButton(
                      child: Text('Change Color', style: buttontext),
                      color: _favIconColorList[3],
                      onPressed: () {
                        setState(() {
                          selectedIndex = 3;
                        });
                      }))
            ],
          ),
        ),
      ),
    );
  }
}

您可以定義一個 _favIconColorList 來存儲每個 ButtonTheme 項目的顏色和一個 selectedIndex，默認值為 -1。 如果通過點擊其中之一將其設置為 ButtonTheme 列表的索引，則顏色將僅設置選定的 ButtonTheme。 否則，所有的 ButtonTheme 列表都會改變。