【问题标题】:The setState method doesn't refresh all the page in my flutter appsetState 方法不会刷新我的颤振应用程序中的所有页面
【发布时间】:2019-10-24 03:35:59
【问题描述】:

我的颤振应用程序中有一个带有 4 个选项卡的“TabBar”...当我切换选项卡时,它会打开另一个页面,正如您在我的代码中看到的那样:

    Widget _selectedContent(){
    switch(_selectedItems){
      case 0:
        setState(() {});
        return _buildCategory();
        break;
      case 1:
        setState(() {});
        return _buildLanguage();
        break;
      case 2:
        setState(() {});
        return _buildContact();
        break;
      case 3:
        setState(() {});
        return _buildThemeColor();
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text(allTranslations.text('SettingsPageTitle')),
        centerTitle: true,
        backgroundColor: GeneralVariables.appBarColor,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.help_outline),
            onPressed: () => Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context) => new RulesExplanation())),
            iconSize: 30.0,
          ),
        ],
      ),
      body: Container(
        child: _selectedContent(),
      ),
      bottomNavigationBar: Container(
        padding: EdgeInsets.only(bottom: 5),
        color: GeneralVariables.appBarColor,
        child: TabBar(
          indicatorColor: Colors.red,
          controller: tabBarController,
          onTap: (int index) => setState(() {_selectedItems = index;}),
          tabs: <Widget>[
            Tab(
              icon: Icon(Icons.check_circle_outline),
              text: allTranslations.text('SettingsPageTab1Title'),
            ),
            Tab(
              icon: Icon(Icons.language),
              text: allTranslations.text('SettingsPageTab2Title'),
            ),
            Tab(
              icon: Icon(Icons.mail_outline),
              text: allTranslations.text('SettingsPageTab3Title'),
            ),
            Tab(
              icon: Icon(Icons.color_lens),
              text: "Thèmes",
            )
          ],
        ),
      ),
      backgroundColor: GeneralVariables.mainColor,
    );
  }

  Widget _buildCategory(){
    return CategoryPage();
  }

  Widget _buildContact(){
    return ContactPage();
  }

  Widget _buildLanguage(){
    return LanguagePage();
  }

  Widget _buildThemeColor(){
    return ThemeColorPage();
  }

如您所见,当我打开“语言”选项卡时,它会打开此页面:

class _LanguagePageState extends State<LanguagePage>{
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(padding: EdgeInsets.only(top: 5),),
          Text(allTranslations.text('LanguagePageLanguageTitle'), style: TextStyle(color: Colors.white, fontSize: 25.0,),),
          Container(padding: EdgeInsets.all(10.0),),
          _langButton("LanguagePageFrench", "France.png", "fr", false),
          Container(padding: EdgeInsets.all(20.0),),
          _langButton("LanguagePageEnglish", "United-Kingdom.png", "en", true),
          Expanded(child: Container(),),
          Row(
            children: <Widget>[
              Text(allTranslations.text('LanguagePageNotifInfo'), style: TextStyle(color: Colors.white, fontSize: 13.0),),
              Expanded(child: Container(),),
              new OutlineButton(
                child: new Text(allTranslations.text('LanguagePageDialog3'), style: TextStyle(color: Colors.white, fontSize: 13,),),
                shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(20.0)),
                onPressed: () {
                  _showDialog(allTranslations.text('LanguagePageDialog1'),
                      allTranslations.text('LanguagePageDialog2'),
                      allTranslations.text('LanguagePageDialog3'),
                      allTranslations.text('LanguagePageDialog4'));
                },
              ),
            ],
          ),
        ],
      ),
    );
  }

  InkWell _langButton(String titre, String imageName, String langCode, bool experimental){

    return InkWell(
      onTap: () async {
        await allTranslations.setNewLanguage(langCode);
        allTranslations.setPreferredLanguage(langCode);
        setState((){
          if(langCode == 'fr'){
            LandingPageState.firebaseMessaging.subscribeToTopic(GeneralVariables.topicFr);
            LandingPageState.firebaseMessaging.unsubscribeFromTopic(GeneralVariables.topicEn);
            print("Subscribed to french subject");

            LandingPageState.firebaseMessaging.subscribeToTopic(GeneralVariables.topicFr_1_3_1);
            LandingPageState.firebaseMessaging.unsubscribeFromTopic(GeneralVariables.topicEn_1_3_1);
          }
          else if (langCode == 'en'){
            LandingPageState.firebaseMessaging.subscribeToTopic(GeneralVariables.topicEn);
            LandingPageState.firebaseMessaging.unsubscribeFromTopic(GeneralVariables.topicFr);
            print("Subscribed to english subject");

            LandingPageState.firebaseMessaging.subscribeToTopic(GeneralVariables.topicEn_1_3_1);
            LandingPageState.firebaseMessaging.unsubscribeFromTopic(GeneralVariables.topicFr_1_3_1);
          }
        });
      },
      child: Row(
        children: <Widget>[
          Image(
            image: AssetImage('images/flags/$imageName'),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
          ),
          Text(allTranslations.text(titre),
            style: TextStyle(fontSize: 25.0, color: Colors.white, fontWeight: FontWeight.bold),),
          Expanded(
            child: Container(),
          ),
          _experimentalInfo(experimental)
        ],
      ),
    );
  }
}

那里没有全班……

但是当我更改语言时,它会在所选页面(语言页面)上更改但它不会在有 TabBar 的页面上更改...我想知道是否存在调用“外部”类(标签栏之一)的 setState 方法。作为一个超级会做的......

【问题讨论】:

    标签: android ios flutter dart


    【解决方案1】:

    您可以使用回调函数在两个小部件之间进行通信。

    在孩子中声明一个像下面这样的final,在这种情况下我假设它是LanguagePage。

    final void Function(String langCode) langChanged;
    

    在 InkWell 的 onTap 事件中,调用该函数。

    widget.langChanged(langCode);

    在父级,当您创建子级时,传递函数。

    LanguagePage(langChanged:(langCode){
      setState(){}
    });
    

    【讨论】:

      猜你喜欢
      • 2021-11-23
      • 2020-07-30
      • 1970-01-01
      • 2021-10-20
      • 1970-01-01
      • 2019-11-22
      • 2021-04-08
      • 2021-11-11
      • 1970-01-01
      相关资源
      最近更新 更多