android - flutter - UI 更改仅在点击另一个元素时生效

Question

我有下面的屏幕，这个屏幕显示了用户在 previous/last 和 current 月份的历史记录。 点有2个指标，分别是Text1和Text2。

我的屏幕如何工作:

1. 默认数据将显示当前 月份。
2. 如果我点击 last month 按钮，它会更改 UI 以显示上个月的数据。
3. 如果我点击显示/隐藏文本 1，首先它会隐藏 Text1 的所有外观。如果我再次点击，则所有 Text1 将再次出现。
4. 对于 Show/Hide Text2 与第 (3) 点相同。

问题:

如果我点击 Text1 或 Text2 的 show/hide 按钮 它只会在我点击 last 后生效month 或 current month 按钮(显示/隐藏 Text1 或 Text2 的元素)。所以 show/hide 按钮的变化效果不是即时的，我需要点击另一个元素才能生效。

代码:

MainHistoryScreen.dart :

class MainHistoryScreen extends StatefulWidget {
  @override
  _MainHistoryScreenState createState() {
    return new _MainHistoryScreenState();
  } 
}

class _MainHistoryScreenState extends State<MainHistoryScreen> {

  MainHistoryBloc MainHistoryBloc;
  int selectedValue = 1;

  //you don't have to declare false as bool is initialised false by default
  bool showText1 = false;
  bool showText2 = false;
  bool showText3 = false;

  @override
    void initState() {
      super.initState();
      MainHistoryBloc = MainHistoryBloc();
      MainHistoryBloc.getContents(context);
  }

  @override
    void dispose() {
      super.dispose();
      MainHistoryBloc.dispose();
    }

  getNumberFormat(String str) {
    final f = new NumberFormat("#.###");
    return str.replaceAll(f.symbols.GROUP_SEP, '');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Pigment.fromString(UIData.primaryColor),
        elevation: 0,
        centerTitle: true,
        title: Text(translations.text("main_history").toUpperCase()),
        leading: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: InkWell(
                child: SizedBox(child: Image.asset("assets/images/arrow-back.png"), height: 10, width: 1,),
                onTap: () => Navigator.of(context).pop(),
              )
            ),  
          ],
        ),
      ),
      body: ListView(
        primary: true,
        scrollDirection: Axis.vertical,
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height * 0.30,
            padding: EdgeInsets.all(16.0),
            width: MediaQuery.of(context).size.width,
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage("assets/images/account/background.png"),
                fit: BoxFit.cover,
              ),
            ),
            child: Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  SizedBox(
                    child: CircleAvatar(
                      backgroundImage: NetworkImage(UIData.defaultUserIconUrl),
                    ),
                    height: 75,
                    width: 75,
                  ),
                  SizedBox(height: 20,),
                  StreamBuilder(
                    stream: MainHistoryBloc.userStream,
                    builder: (BuildContext ctx,AsyncSnapshot<User> snapshot){
                      if(!snapshot.hasData) {
                        return Text(translations.text("member_since") + ": -", style: TextStyle(color: Colors.white));
                      }
                      return Text(translations.text("member_since") + ": " + new DateFormat("d MMMM y").format(DateTime.parse(snapshot.data.created_at.toString())), style: TextStyle(color: Colors.white));
                    }
                  )
                ]
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(8),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Divider(height: 2, color: Pigment.fromString(UIData.primaryColor),),
                SizedBox(height: 10,),
                StreamBuilder(
                  stream: MainHistoryBloc.totalmainHistoryStream,
                  builder: (BuildContext ctx, AsyncSnapshot<UserDetail> snapshot){
                    var point = snapshot.hasData ? this.getNumberFormat(snapshot.data.point.toString()) : "0";
                    var main = snapshot.hasData ? this.getNumberFormat(snapshot.data.main.toString()) : "0";
                    var sadaqah = snapshot.hasData ? this.getNumberFormat(snapshot.data.sadaqah.toString()) : "0";
                    return Container(
                      child: Row(
                        children: <Widget>[
                          Expanded(
                            child: mainMenuWidget(
                              image: "assets/images/main/star.png", 
                              title: translations.text("total_points"), 
                              subtitle: point,
                              onTap: () {

                                //Show/Hide Text1
                                showText1 = !showText1;
                                print ("Text 1 = "+showText1.toString());
                              }
                            )
                          ),
                          Expanded(
                            child: mainMenuWidget(
                              image: "assets/images/home/my-main.png",
                              title: translations.text("total_main"),
                              subtitle: main,
                              onTap: () {

                                //Show/Hide Text2
                                showText2 = !showText2;
                              }
                            )
                          ),
                          Expanded(
                            child: mainMenuWidget(
                              image: "assets/images/home/more-sadaqah.png",
                              title: translations.text("total_sadaqah"),
                              subtitle: sadaqah,
                              onTap: () {

                                //Show/Hide Text 3  
                                showText3 = !showText3;
                              },
                            )
                          )
                        ],
                      )
                    );
                  }
                ),
                SizedBox(height: 10,),
                Divider(height: 2, color: Pigment.fromString(UIData.primaryColor),),
                Padding(
                  padding: EdgeInsets.only(left: 26, top: 12, bottom: 12),
                  child: Text(translations.text("histories"), textAlign: TextAlign.left, style: TextStyle(fontSize: 16),),
                ),
                Divider(height: 2, color: Pigment.fromString(UIData.primaryColor),),
                SizedBox(
                  width: 1000,
                  child: Padding(
                    padding: EdgeInsets.all(8),
                    child: StreamBuilder(
                      stream: MainHistoryBloc.tabSelectedValueStream,
                      builder: (context, snapshot) {
                        return CupertinoSegmentedControl<int>(
                          selectedColor: Pigment.fromString(UIData.primaryColor),
                          borderColor: Pigment.fromString(UIData.primaryColor),
                          children:  <int, Widget>{
                            0: Text(translations.text("last_month").toString()),
                            1: Text(translations.text("this_month").toString()),
                          },
                          onValueChanged: (int newValue) {
                            MainHistoryBloc.onChangeTab(newValue);
                          },
                          groupValue: snapshot.data,
                        );
                      }
                    ),
                  )
                ),
              ],
            )
          ),
          historiesWidget(),
        ],
      )
    );
  }

  Widget historiesWidget() {
    return StreamBuilder(
      stream: MainHistoryBloc.mainHistoriesStream,
      builder: (BuildContext ctx, AsyncSnapshot<List<mainHistory>> snapshot) {
        if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
        if (!snapshot.hasData) return Center(child: ActivityIndicatorWidget());
        if (snapshot.data.length <= 0) return Center(child: Text(translations.text("empty_data")));

        return ListView.builder(
          shrinkWrap: true,
          itemCount: snapshot.data.length,
          primary: false,
          physics: const NeverScrollableScrollPhysics(),
          itemBuilder: (ctx, i) {
            return ActivityHistoryCardWidget(mainHistory: snapshot.data[i],
                showText1: showText1,
                showText2: showText2,
                showText3: showText3,
            );
          }
        );
      }
    );
  }
}

下面是用于显示数据的列表卡片小部件。

ActivityHistoryWidget.dart :

class ActivitHistoryCardWidget extends StatefulWidget {

  DActivitHistory dActivitHistory;
  bool showText1;
  bool showText2;
  bool showText3;

  ActivitHistoryCardWidget({this.dActivitHistory, this.showText1, this.showText2, this.showText3});

  @override
  _ActivitHistoryCardWidget createState() {
    return new _ActivitHistoryCardWidget(dActivitHistory: dActivitHistory);
  }


}

class _ActivitHistoryCardWidget extends State<ActivitHistoryCardWidget> {

  DActivitHistory dActivitHistory;
  bool showText1;
  bool showText2;
  bool showText3;

  _ActivitHistoryCardWidget({this.dActivitHistory, this.showText1, this.showText2, this.showText3});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                width: 100,
                alignment: Alignment.topCenter,
                child: Text(new DateFormat("d").format(DateTime.parse(dActivitHistory.dActivitDate)),  
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 50,
                  )
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SizedBox(height: 10,),
                  Text(new DateFormat("EEEE").format(DateTime.parse(dActivitHistory.dActivitDate)),
                    style: TextStyle(
                      fontSize: 14
                    ),
                  ),
                  SizedBox(height: 5,),
                  Text(new DateFormat("MMMM y").format(DateTime.parse(dActivitHistory.dActivitDate)),
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w600
                    ),
                  ),


                  //Point Widget
                  widget.showText1 ? Container() : this.PointHistory(context),

                  //Activit Widget
                  widget.showText2 ? Container() : this.ActivitHistory(context),

                  //Give Widget
                  widget.showText3 ? Container() : this.GiveHistory(context),

                  SizedBox(height: 10,),
                ],
              )
            ],
          ),
        ),
        Divider(height: 2, color: Pigment.fromString(UIData.primaryColor),),
      ],
    );
  }


  Widget PointHistory(context) {
    return Column(
      children: <Widget>[
        SizedBox(height: 10,),
        Row(
          children: <Widget>[
            SizedBox(child: Image.asset("assets/images/Activit/star.png"),height: 20, width: 20,),
            SizedBox(width: 10,),
            Text(getNumberFormat(dActivitHistory.counter.toString()),
              style: TextStyle(
                  fontSize: 16,
                  color: Pigment.fromString(UIData.primaryColor)
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget ActivitHistory(context) {
    return Column(
      children: <Widget>[
        SizedBox(height: 10,),
        Row(
          children: <Widget>[
            SizedBox(child: Image.asset("assets/images/home/my-Activit.png"),height: 20, width: 20,),
            SizedBox(width: 10,),
            Text(getNumberFormat(dActivitHistory.dActivitTotal.toString()),
              style: TextStyle(
                  fontSize: 16,
                  color: Pigment.fromString(UIData.primaryColor)
              ),
            ),
          ],
        ),

      ],
    );
  }

  Widget GiveHistory(context) {
    return Column(
      children: <Widget>[
        SizedBox(height: 10,),
        Row(
          children: <Widget>[
            SizedBox(child: Image.asset("assets/images/home/more-Give.png"),height: 20, width: 20,),
            SizedBox(width: 10,),
            Text('Di Salurkan Sejumlah Rp '+getNumberFormat(dActivitHistory.GiveTotal.toString()+' ke Lembaga '+getFoundationName(dActivitHistory.foundationDonateId.toString()) ),
              style: TextStyle(
                  fontSize: 16,
                  color: Pigment.fromString(UIData.primaryColor)
              ),
            ),
          ],
        ),
      ],
    );
  }

  getFoundationName(String str)
  {
    String returnName = '';
    switch (str) {
      case '1':
        returnName = 'A';
        break;
      case '2':
        returnName = 'B';
        break;
      case '3':
        returnName = 'C';
        break;
      case '4':
        returnName = 'D';
        break;
      case '5':
        returnName = 'E';
        break;
    }
    return returnName;
  }

  getNumberFormat(String str) {
    final f = new NumberFormat("#.###");
    return str.replaceAll(f.symbols.GROUP_SEP, '');
  }
}

有什么想法吗？

提前致谢...

Answer 1

您需要使用setState() 方法来改变状态。例如:

Expanded(
    child: mainMenuWidget(
        image: "assets/images/home/more-sadaqah.png",
        title: translations.text("total_sadaqah"),
        subtitle: sadaqah,
        onTap: () {
            setState(() {
                showText3 = true;
            });
        },
    )
)

它将更新用户界面，因为您已经使用条件状态来更改它。

//Give Widget
widget.showText3 ? Container() : this.GiveHistory(context),

但这只有在您更改一个类中的状态时才有效。我看到你有 2 个独立的类，你需要更高级的状态管理。所以你可以维护来自不同类的状态。尝试使用 provider .