为什么文本小部件在其中的变量发生变化时不更新？答案

【问题标题】：Why does text widget not update when variable inside it changes?为什么文本小部件在其中的变量发生变化时不更新？
【发布时间】：2019-12-08 15:29:08
【问题描述】：

在我的代码中，我想创建一个简单的计数器，当单击另一个页面上的按钮时触发该计数器。我在按钮页面上创建计数器，然后将其发送到显示它的主页。

void onTap() {

    Widget displayWidget() {
      int drinks = 0;
      return Container(
        child: InkWell(
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(child: Image(image: AssetImage('Images/HabitBars/pinkBar.png'))),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Text("Target: ${glasses.toString()}"),
                  Container(
                    child: Row(
                      children: <Widget>[
                        IconButton(
                            icon: Icon(Icons.remove),
                            onPressed: () {
                              setState(() {
                                drinks--;
                              });
                            }
                        ),
                        Text(drinks.toString()),
                        IconButton(
                            icon: Icon(Icons.add),
                            onPressed: () {
                              setState(() {
                                drinks++;
                              });
                            }
                        ),
                      ],
                    ),
                  )
                ],
              )
            ],
          ),
        ),
      );
    }

    Navigator.push(context, MaterialPageRoute(builder: (context) => MainPage(displayWidget())));

  }

这是按下按钮时调用的函数。

MainPage 的代码如下

import 'package:flutter/material.dart';
import './NewHabitPage.dart';
import 'gloabals.dart' as globals;

class MainPage extends StatefulWidget {
  Widget habit;
  MainPage(this.habit);
  @override
  State createState() => MainPageState(newHabit: habit);
}

class MainPageState extends State<MainPage> {

   Widget newHabit;

  MainPageState({this.newHabit}) {
    if (newHabit != null) {
      globals.habits.add(newHabit);
    }
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text("Your Habits", style: TextStyle(color: Colors.green, fontFamily: 'Raleway', fontSize: 30.0), textAlign: TextAlign.center,),
          leading: IconButton(icon: Icon(Icons.dehaze, color: Colors.green,), onPressed: () => print("YEET")),
          backgroundColor: Colors.white,
          elevation: 0.0,
          centerTitle: true,
        ),
        bottomNavigationBar: GestureDetector(
          onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => NewHabitPage())),
          child: Container(
              child: Image(image: AssetImage('Images/newHabit.png')),
          ),
        ),
        body: HabitView(habits: globals.habits,),
      ),
    );
  }
}

class HabitView extends StatefulWidget {
  List<Widget> habits;
  HabitView({@required this.habits});

  @override
  State createState() => HabitViewState(habits: habits);
}

class HabitViewState extends State<HabitView> {

  HabitViewState({@required this.habits});
  List<Widget> habits;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView.builder(
          itemBuilder: (context, i) {
            if (habits.length == 0){
              return Center(
                  child: Padding(
                    padding: const EdgeInsets.all(50.0),
                    child: Text("Wow such empty", style: TextStyle(color: Colors.grey, fontSize: 15.0),),
                  ));
            } else {
              return habits[i];
            }
          },
          itemCount: habits.length == 0? 1 : habits.length,
      ),
    );
  }
}

Globals 是我存储全局变量的文件。目前唯一的全局变量是我用于 listview.builder 的小部件列表，它被称为 globals.habits。

问题是，当我将小部件从 onTap 发送到 MainPage 时，单击图标按钮时，尽管饮料变量发生变化，但文本（它使用饮料变量）并没有改变。

我对颤动很陌生，所以不确定某些事情是如何工作的。

【问题讨论】：

标签： flutter dart

【解决方案1】：

尝试使用provider。你的问题与flutter - UI change ONLY Take Effect if tap another element类似

【讨论】：

他也可以用redux,blocs...
谢谢！不过，我用不同的方法解决了这个问题 - 我将 ontap() 函数中的小部件设置为不同的类。