【问题标题】: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,

               ),

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

提前致谢!!

【问题讨论】:

    标签: flutter


    【解决方案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确实解释了它,但我不明白。再次感谢您,它就像一个魅力!
    • 欢迎 :) 编码愉快。
    猜你喜欢
    • 1970-01-01
    • 2015-06-04
    • 1970-01-01
    • 2021-06-22
    • 2015-04-03
    • 2020-10-11
    相关资源
    最近更新 更多