Question

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

我的屏幕如何工作：

默认数据将显示current个月。
如果我点击last month按钮，它将更改UI以显示上个月的数据。
如果我点击Show/Hide Text 1，首先它将隐藏Text1的所有外观。如果我再次点击，则Text1的所有内容都会再次出现。
对于Show/Hide Text2与点（3）相同。

问题：

如果我点击show/hide或Text1的{{1}}按钮它只有在我点击Text2或last month按钮之后才会生效（显示/隐藏Text1或Text2的元素）。因此current month按钮的更改效果不会立即生效，我需要点击另一个元素才能生效。

代码：

MainHistoryScreen.dart：

show/hide

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

ActivityHistoryWidget.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,
            );
          }
        );
      }
    );
  }
}

有什么想法吗？

预先感谢...

Answer 1

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

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

当您已经使用条件状态进行更改时，它将更新ui。

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

但这仅在您更改一个类的状态时有效。我看到您有2个单独的班级，您需要更多高级状态管理。因此，您可以维护其他类的状态。尝试使用provider。

颤动-仅在点击另一个元素时UI更改才会生效

我的屏幕如何工作：

问题：

代码：

MainHistoryScreen.dart：

ActivityHistoryWidget.dart：

1 个答案: