Блог

Главная - Вопросы по программированию - Изменение цвета при нажатии кнопки RaisedButton в flutter

Изменение цвета при нажатии кнопки RaisedButton в flutter

#flutter #dart

#flutter #dart

Вопрос:

«Когда вы выбираете цвет из выпадающего меню, заголовок виджета раскрывающейся кнопки отображает выбранный цвет. Затем, когда вы нажмете одну из четырех кнопок, только цвет фона этой конкретной кнопки изменится на выбранный цвет фона. » Это то, что я хочу сделать.

введите описание изображения здесь

На этом рисунке показан экран. В выпадающей кнопке есть 4 варианта цвета. Вначале я создал карты для получения «Colors.black» и т. Д. Затем я написал функцию с именем «изменить» и эту функцию для цветовых палитр.

Но я запутался в том, где вызывать эту функцию. Нажатая часть кнопок RaisedButtons прямо сейчас пуста. В первой кнопке 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: () {}))
            ],
          ),
      ),
    ),
  );}}

Ответ №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: я не знаю, для чего используется ваша функция изменения!! здесь это не имеет никакого эффекта, если только оно не возвращает значение цвета или код зависит от того, как вы хотите его использовать

Комментарии:

1. На самом деле, я хочу вызвать функцию изменения, но я не нашел, где это сделать. В вашем коде «newColor» откуда он берется

2. это происходит из выпадающего списка widjet, когда вы меняете раскрывающееся выбранное значение, вы сохраняете новый цвет

3. здесь: DropDownButton(элементы: frommenuitems, подсказка: Текст (‘Черный’, стиль: TextStyle(цвет: Colors.black)), значение: renk, OnChanged: (значение) { setState(() { renk = значение;** newColor = значение ;*** изменить (renk); }); } ),

Ответ №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] = resu<
        _favIconColorList[1] = resu<
        _favIconColorList[2] = resu<
        _favIconColorList[3] = resu<
      } else {
          _favIconColorList[selectedIndex] = resu<    
      }
    }

    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 будет изменен.

введите описание изображения здесь