onTap 方法无法更改堆栈内容器的颜色和动画容器内卡片颜色的不透明度

Question

stack 中的 setState 方法不会改变 Stack 中 Color Widget 的值和 opacity 值。当平面按钮 - >“更改颜色”被点击为红色时，我想将容器的绿色更改为红色，但没有出现任何变化。另外，我想更改 Inkwell Container 的不透明度值颜色，但同样没有发生？如何解决我的问题以及如何使用 onTap 方法更改堆栈内容器的颜色？提前谢谢！

import 'package:flutter/material.dart';

class CategoryListItems extends StatefulWidget {
  const CategoryListItems({Key? key}) : super(key: key);

  @override
  State<CategoryListItems> createState() => _CategoryListItemsState();
}

class _CategoryListItemsState extends State<CategoryListItems>
    with SingleTickerProviderStateMixin {
  double _bottomPosition = -150;
  double opacity = 0.2;
  @override
  Widget build(BuildContext context) {
    String category_selected = "Vegetables";
    Color colorCont = Colors.green;
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Color.fromRGBO(245, 131, 33, 1),
          title: TextField(
            decoration: InputDecoration(hintText: "Search for vegetables"),
          )),
      backgroundColor: Color.fromRGBO(255, 251, 247, 1),
      body: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 15, bottom: 15),
            child: Column(
              children: [
                const SizedBox(
                  height: 10,
                ),
                Text(category_selected,
                    style: TextStyle(
                        color: Color.fromRGBO(67, 67, 67, 1),
                        fontSize: 30,
                        fontWeight: FontWeight.bold)),
                SizedBox(
                  height: 10,
                ),
                Expanded(
                    child: Padding(
                        padding: const EdgeInsets.all(3),
                        child: Ink(
                          child: Container(
                            color: colorCont,
                            height: MediaQuery.of(context).size.height,
                            width: MediaQuery.of(context).size.width,
                            child: Column(
                              children: [
                                Center(
                                  child: FlatButton(
                                      onPressed: () {
                                        setState(() {
                                          _bottomPosition = 0;
                                        });
                                      },
                                      child: Text("Popup")),
                                ),
                                Center(
                                  child: FlatButton(
                                      onPressed: () {
                                        setState(() {
                                          colorCont = Colors.red;
                                        });
                                      },
                                      child: Text("change color")),
                                ),
                                Center(
                                  child: FlatButton(
                                      onPressed: () {
                                        print(colorCont.toString());
                                      },
                                      child: Text("print opacity")),
                                ),
                              ],
                            ),
                          ),
                        ))),
              ],
            ),
          ),
          AnimatedPositioned(
            height: 150,
            child: Container(
              color: Colors.orange,
              width: MediaQuery.of(context).size.width,
              height: 70,
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    FlatButton(
                        onPressed: () {
                          setState(() {
                            _bottomPosition = -70;
                          });
                        },
                        child: Icon(Icons.arrow_back)),
                    SizedBox(
                      height: 10,
                    ),
                    Card(
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            opacity = 1;
                          });
                          print(opacity);
                        },
                        child: Container(
                          height: 50,
                          width: 50,
                          color: Colors.red.withOpacity(opacity),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
            duration: Duration(milliseconds: 100),
            bottom: _bottomPosition,
          )
        ],
      ),
    );
  }
}

Answer 1

您需要将colorCont 移到build 方法之外。在每次 setState 调用时，build 方法将被重新加载以更新 UI。

固定代码：

import 'package:flutter/material.dart';    
class CategoryListItems extends StatefulWidget {
      const CategoryListItems({Key? key}) : super(key: key);
    
      @override
      State<CategoryListItems> createState() => _CategoryListItemsState();
    }
    
    class _CategoryListItemsState extends State<CategoryListItems>
        with SingleTickerProviderStateMixin {
      double _bottomPosition = -150;
      double opacity = 0.2;
      Color colorCont = Colors.green; // move color outside build scope
      @override
      Widget build(BuildContext context) {
        String category_selected = "Vegetables";
        return Scaffold(
          appBar: AppBar(
              backgroundColor: Color.fromRGBO(245, 131, 33, 1),
              title: TextField(
                decoration: InputDecoration(hintText: "Search for vegetables"),
              )),
          backgroundColor: Color.fromRGBO(255, 251, 247, 1),
          body: Stack(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 15, bottom: 15),
                child: Column(
                  children: [
                    const SizedBox(
                      height: 10,
                    ),
                    Text(category_selected,
                        style: TextStyle(
                            color: Color.fromRGBO(67, 67, 67, 1),
                            fontSize: 30,
                            fontWeight: FontWeight.bold)),
                    SizedBox(
                      height: 10,
                    ),
                    Expanded(
                        child: Padding(
                            padding: const EdgeInsets.all(3),
                            child: Ink(
                              child: Container(
                                color: colorCont,
                                height: MediaQuery.of(context).size.height,
                                width: MediaQuery.of(context).size.width,
                                child: Column(
                                  children: [
                                    Center(
                                      child: FlatButton(
                                          onPressed: () {
                                            setState(() {
                                              _bottomPosition = 0;
                                            });
                                          },
                                          child: Text("Popup")),
                                    ),
                                    Center(
                                      child: FlatButton(
                                          onPressed: () {
                                            setState(() {
                                              colorCont = Colors.red;
                                            });
                                          },
                                          child: Text("change color")),
                                    ),
                                    Center(
                                      child: FlatButton(
                                          onPressed: () {
                                            print(colorCont.toString());
                                          },
                                          child: Text("print opacity")),
                                    ),
                                  ],
                                ),
                              ),
                            ))),
                  ],
                ),
              ),
              AnimatedPositioned(
                height: 150,
                child: Container(
                  color: Colors.orange,
                  width: MediaQuery.of(context).size.width,
                  height: 70,
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        FlatButton(
                            onPressed: () {
                              setState(() {
                                _bottomPosition = -70;
                              });
                            },
                            child: Icon(Icons.arrow_back)),
                        SizedBox(
                          height: 10,
                        ),
                        Card(
                          child: InkWell(
                            onTap: () {
                              setState(() {
                                opacity = 1;
                              });
                              print(opacity);
                            },
                            child: Container(
                              height: 50,
                              width: 50,
                              color: Colors.red.withOpacity(opacity),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                duration: Duration(milliseconds: 100),
                bottom: _bottomPosition,
              )
            ],
          ),
        );
      }
    }