Question

“当您从下拉菜单中选择一种颜色时，下拉按钮小部件的标题将显示所选的颜色。然后，当您点击四个按钮之一时，只有该特定按钮的背景颜色会变为所选的颜色背景颜色。”这就是我要做的。

此图显示屏幕。 DropdownButton中有4种颜色选项。最初，我为获取“ 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
               });

             })),

这里的问题是，每次更改颜色时，所有Button都将具有相同的颜色（由于setState），如果可以的话，如果您希望每个按钮都有自己的颜色，则应该考虑使用数组来知道哪个按钮应该更改颜色

Ps：我不知道您的更改功能用于什么！除非它返回颜色值或代码取决于您要使用的颜色，否则它在这里无效。

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列表都会更改。

颤动中的RaisedButton的OnPressed中的颜色变化

2 个答案: