可以更改容器背景颜色/颤动颜色的按钮

Posted 2023-02-23

【中文标题】可以更改容器背景颜色/颤动颜色的按钮

【英文标题】：Button that can change container background color/color for flutter

【发布时间】：2020-09-25 22:11:44

【问题描述】：

我是 Flutter 的新手，我只是在学习 Flutter 的所有基础知识。我遇到了按钮小部件和按下的功能，我创建了一个简单的容器，其中有一个像这样的按钮

这是容器

Container(

    child: Padding(
    padding: const EdgeInsets.only(top: 25.0, left: 30),
    child: Text("Item 1", style: TextStyle(
    color: Colors.lightBlueAccent,
    fontWeight: FontWeight.bold,
    fontSize: 20,
            ),
           ),
          ),

这是按钮

child: FloatingActionButton(

     onPressed(),
    child: Text("+", style: TextStyle(
    fontSize: 20,
                 ),
                ),
    backgroundColor: Colors.lightBlue,

               ),

我想让按钮具有将容器背景更改为某种颜色的功能，例如蓝色。但我似乎无法在互联网上找到答案，我猜对我来说。有什么我可以应用的方法或我不知道的代码吗？

提前致谢！！

【参考方案1】：

声明默认材质颜色

MaterialColor _color = Colors.green;

在 onPressed() 中改变上面的颜色

Container(
        color: _color,
        child: RaisedButton(onPressed: () 
          setState(() 
            _color = Colors.blue; // This change Container color
          );
        ),
      )

【讨论】：

哇哦！这完全有道理。我必须在类中声明颜色吗？或者我可以在我的 void main runApp 函数中声明它（或任何它被调用的函数）？我完全一无所知。

【参考方案2】：

虽然你已经从 jitsm555 得到了很好的答案，但这里是完整的例子，我希望这对你有进一步的帮助。

import 'package:flutter/material.dart';

void main() 
  runApp(ColorChange());


class ColorChange extends StatefulWidget 
  @override
  _ColorChangeState createState() => _ColorChangeState();


class _ColorChangeState extends State<ColorChange> 
  //Initially color is set to yellow which will be changed when button is pressed
  Color color = Colors.yellow;
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Change Container Color"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                width: 300,
                height: 300,
                color: color, //value of color which we will change by pressing buttons
              ),

             /* Below Row of Button when pressed will fire up 
                the setState and the state of our default color variable will 
                change according to Button which is pressed
             */
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    color: Colors.red,
                    child: Text("Red"),
                    onPressed: () 
                      setState(() 
                        color = Colors.red;
                      );
                    ,
                  ),
                  RaisedButton(
                    color: Colors.green,
                    child: Text("Green"),
                    onPressed: () 
                      setState(() 
                        color = Colors.green;
                      );
                    ,
                  ),
                  RaisedButton(
                    color: Colors.blue,
                    child: Text("Blue"),
                    onPressed: () 
                      setState(() 
                        color = Colors.blue;
                      );
                    ,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  

输出：

【讨论】：

天哪，非常感谢您，先生，这真的解释了很多。我的意思是jitsm555确实解释了它，但我不明白。再次感谢您，它就像一个魅力！

欢迎 :) 编码愉快。