Flutter - 如何在另一个类上显示/隐藏小部件

coder 2023-07-23 原文

我有 2 个类，第一个是 Main Widget Screen，第二个是 List Card。在 View Perspective 中，Main Widget Screen 类包含来自 List Card Widget 类的 List Widget，如下图所示:

在 List Card Widget 上，每个列表都有 2 个文本:Text1 和 Text2。

还有 2 个按钮:this month 和 last month。 List Card Widget 上的数据将根据Bloc Stream ZikirHistoryBloc.onChangeTab() 刷新。默认值为 本月。

我想要实现的是:

How to Show/Hide (On/Off) Text1 and Text2 by button on Main Screen ?

到目前为止我的努力:

主屏幕类:

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() {
    return new _MainScreenState();
  }
}

class _MainScreenState extends State<MainScreen> {

  ZikirHistoryBloc zikirHistoryBloc;
  int selectedValue = 1;

...


@override
  Widget build(BuildContext context) {
    return Scaffold(

      ...

       Expanded(
          child: ButtonMenuWidget(
            image: "assets/images/zikir/button-text1.png",
            title: translations.text("button_show_hide_text1"),
            subtitle: point,
            onTap: () {

              //This is action for Button for Show/Hide Text1**

            }
          )
        ),
      Expanded(
        child: ButtonMenuWidget(
          image: "assets/images/home/button-text2.png",
          title: translations.text("button_show_hide_text2"),
          subtitle: dzikir,
          onTap: () {

           //This is action for Button for Show/Hide Text1**

          }
        )
      ),

      ...

      SizedBox(
              width: 1000,
              child: Padding(
                padding: EdgeInsets.all(8),
                child: StreamBuilder(
                  stream: zikirHistoryBloc.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) {
                        zikirHistoryBloc.onChangeTab(newValue);
                      },
                      groupValue: snapshot.data,
                    );
                  }
                ),
              )
            ),

      ...

      this.HistoriesWidget(),

      ...

}//::end of Widget build

...

Widget HistoriesWidget() {
    return StreamBuilder(
      stream: zikirHistoryBloc.dzikirHistoriesStream,
      builder: (BuildContext ctx, AsyncSnapshot<List<DzikirHistory>> 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) {

            //**Below will call class ListCardWidget**

            return ListCardWidget(dzikirHistory: snapshot.data[i]);

          }
        );
      }
    );
  }

...

} //::end of Class `Main Screen`

列出卡片小部件类:

class ListCardWidget extends StatefulWidget {

  DzikirHistory dzikirHistory; 
  ListCardWidget({this.dzikirHistory});

  @override
  _ListCardWidget createState() {
    return new _ListCardWidget(dzikirHistory: dzikirHistory);
  }
}

class _ListCardWidget extends State<ListCardWidget> {

  bool isHiddenText1;
  bool isHiddenText2;
  DzikirHistory dzikirHistory; 

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[              
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[

                  isHiddenText1 ? Container() : this.Text1Row(context),
                  isHiddenText2 ? Container() : this.Text2Row(context),

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


Widget Text1Row(context) {
  return Column(
    children: <Widget>[
      SizedBox(height: 10,),
      Row(
        children: <Widget>[
          SizedBox(child: Image.asset("assets/images/home/my-zikir-total.png"),height: 20, width: 20,),
          SizedBox(width: 10,),
          Text('Text 1 ='+getNumberFormat(dzikirHistory.dzikirTotal.toString()),
            style: TextStyle(
                fontSize: 16,
                color: Pigment.fromString(UIData.primaryColor)
            ),
          ),
        ],
      ),
    ],
  );
}

Widget Text2Row(context) {
  return Column(
    children: <Widget>[
      SizedBox(height: 10,),
      Row(
        children: <Widget>[
          SizedBox(child: Image.asset("assets/images/home/my-point.png"),height: 20, width: 20,),
          SizedBox(width: 10,),
          Text('Text 2 ='+getNumberFormat(dzikirHistory.counter.toString()),
            style: TextStyle(
                fontSize: 16,
                color: Pigment.fromString(UIData.primaryColor)
            ),
          ),
        ],
      ),
    ],
  );
}  

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

...

}//end of class List Card Widget

其他类(模型):

class DzikirHistory {

    static const CATEGORY_POINT = "point";
    static const CATEGORY_DZIKIR = "dzikir";

    int id;
    int counter;
    int dzikirTotal;
    String dzikirDate;
    dynamic status;
    dynamic createdAt;
    dynamic updatedAt;
    List<DzikirDetail> dzikirDetails;


    DzikirHistory({
        this.id,
        this.counter,
        this.dzikirTotal,
        this.dzikirDate,
        this.status,
        this.createdAt,
        this.updatedAt,
        this.dzikirDetails
    });

    factory DzikirHistory.fromJson(Map<String, dynamic> json) => new DzikirHistory(
        id: json["id"],
        counter: json["counter"],
        dzikirTotal: json["dzikir_total"],
        dzikirDate: json["dzikir_date"],
        status: json["status"],
        createdAt: DateTime.parse(json["created_at"]),
        updatedAt: DateTime.parse(json["updated_at"]),


        // dzikirDetails: new List<DzikirDetail>.from(json["dzikir_details"].map((x) => DzikirDetail.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "counter": counter,
        "dzikir_total": dzikirTotal,
        "dzikir_date": dzikirDate,
        "status": status,
        "created_at": createdAt.toIso8601String(),
        "updated_at": updatedAt.toIso8601String(),

        // "dzikir_details": new List<dynamic>.from(dzikirDetails.map((x) => x.toJson())),
    };
}

区 block 代码:

class ZikirHistoryBloc extends Object implements BlocBase {
...

  init() async {
    _tabSelectedValueController.sink.add(1);
    _userController.sink.add(User.fromJson(await Storage.getUser()));
  }

  onChangeTab(int segment) {
    _tabSelectedValueController.sink.add(segment);
    if (segment == 1) {
      _dzikirHistoriesController.sink.add(dzikirHistories);
    } else {
      _dzikirHistoriesController.sink.add(dzikirLastHistories);
    }
  }
...
}

有什么想法吗？

提前致谢

更新

使用 @FadhliS 解决方案不起作用，因为当我上个月点击时，数据不会刷新(以前是正常的)。此外，仅当我单击上个月或本月按钮时，显示/隐藏才有效。

最佳答案

最好的解决方案是使用继承的 widget/provider/scopedModel 插件，因为您希望在从父级到子级的许多类中全局管理状态。您应该阅读这些并将它们合并到您的项目中。

但你也可以试试这个，这是一个小修复，但不是理想的解决方案

在您的父状态类中创建两个 bool 值并将其传递给您的子列表小部件类。您也可以为那些设置状态

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() {
    return new _MainScreenState();
  }
}

class _MainScreenState extends State<MainScreen> {

  ZikirHistoryBloc zikirHistoryBloc;
  int selectedValue = 1;

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


@override
  Widget build(BuildContext context) {
    return Scaffold(

      ...

       Expanded(
          child: ButtonMenuWidget(
            image: "assets/images/zikir/button-text1.png",
            title: translations.text("button_show_hide_text1"),
            subtitle: point,
            onTap: () {
             setState(){
               showText1 = !showText1;
             }
            }
          )
        ),
      Expanded(
        child: ButtonMenuWidget(
          image: "assets/images/home/button-text2.png",
          title: translations.text("button_show_hide_text2"),
          subtitle: dzikir,
          onTap: () {
           setState(){
               showText2 = !showText2;
             }
          }
        )
      ),

      ...

      this.HistoriesWidget(),

      ...

}//::end of Widget build

...

Widget HistoriesWidget() {
    return StreamBuilder(
      stream: zikirHistoryBloc.dzikirHistoriesStream,
      builder: (BuildContext ctx, AsyncSnapshot<List<DzikirHistory>> 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) {

            //**Below will call class ListCardWidget**

            return ListCardWidget(
              dzikirHistory: snapshot.data[i], 
             showText1: showText1,
             showText2: showText2
            );

          }
        );
      }
    );
  }

...

} //

然后在您的列表卡片小部件类中，将其作为参数传递并使用它

class ListCardWidget extends StatefulWidget {

  DzikirHistory dzikirHistory; 
  bool showText1;
  bool showText2;

  ListCardWidget({this.dzikirHistory, this.showText1, this.showText2});

  @override
  _ListCardWidget createState() {
    //you dont have to pass the elements to your state class
    return new _ListCardWidget();
  }
}

class _ListCardWidget extends State<ListCardWidget> {

  //remove all these variables
  //you can access all the variables directly from the stateful class
  //widget.yourvariable
  bool isHiddenText1;
  bool isHiddenText2;
  DzikirHistory dzikirHistory; 

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[              
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[

                  widget.showText1 ? Container() : this.Text1Row(context),
                  widget.showText2 ? Container() : this.Text2Row(context),

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


Widget Text1Row(context) {
  return Column(
    children: <Widget>[
      SizedBox(height: 10,),
      Row(
        children: <Widget>[
          SizedBox(child: Image.asset("assets/images/home/my-zikir-total.png"),height: 20, width: 20,),
          SizedBox(width: 10,),
          Text('Text 1 ='+getNumberFormat(widget.dzikirHistory.dzikirTotal.toString()),
            style: TextStyle(
                fontSize: 16,
                color: Pigment.fromString(UIData.primaryColor)
            ),
          ),
        ],
      ),
    ],
  );
}

Widget Text2Row(context) {
  return Column(
    children: <Widget>[
      SizedBox(height: 10,),
      Row(
        children: <Widget>[
          SizedBox(child: Image.asset("assets/images/home/my-point.png"),height: 20, width: 20,),
          SizedBox(width: 10,),
          Text('Text 2 ='+getNumberFormat(widget.dzikirHistory.counter.toString()),
            style: TextStyle(
                fontSize: 16,
                color: Pigment.fromString(UIData.primaryColor)
            ),
          ),
        ],
      ),
    ],
  );
}  

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

...

}//end of class List Card Widget

关于Flutter - 如何在另一个类上显示/隐藏小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56962420/

何在部件 Widget code 34 flutter dart flutter-layout

有关Flutter - 如何在另一个类上显示/隐藏小部件的更多相关文章

ruby - 如何在 Ruby 中顺序创建 PI - 2
出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby 中生成它们？ - 2
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？最佳答案你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
ruby-on-rails - Rails - 一个 View 中的多个模型 - 2
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
ruby-on-rails - 渲染另一个 Controller 的 View - 2
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
ruby-on-rails - 如何在 ruby 中使用两个参数异步运行 exe？ - 2
exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby中使用两个参数异步运行exe吗？我已经尝试过ruby命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何rubygems会支持我的问题？最佳答案您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除
ruby - 如何在续集中重新加载表模式？ - 2
鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

Flutter - 如何在另一个类上显示/隐藏小部件

主屏幕类:

列出卡片小部件类:

区 block 代码:

更新

有关Flutter - 如何在另一个类上显示/隐藏小部件的更多相关文章

随机推荐