【问题标题】:Unable to change page based on state无法根据状态更改页面
【发布时间】:2019-04-06 20:01:18
【问题描述】:

Flutter 新手,我正在使用底部导航来切换页面内容。根据调试,设置状态正在发生,其中正确的索引号被捕获并分配给 _selectedPage 变量。然而,一旦我跨过该代码,页面内容将保持不变,而不会更改内容,并且无论我选择什么图标,底部导航中的“主页”图标都会保持选中状态。

当我从导航栏中选择不同的图标时,我预计会有所不同的注释部分。请指教。

import 'package:flutter/material.dart';

class LatestFeed extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => LatestFeedState();
}

class LatestFeedState extends State<LatestFeed>{

  @override
  Widget build(BuildContext context) {

    int _selectedPage = 0;
    List pageOptions = [
      Text('one1', style: TextStyle(fontSize: 36),), // Expecting a change but now it always remains on this data. No change even when set state changes to different index.
      Text('two', style: TextStyle(fontSize: 36),),
      Text('three', style: TextStyle(fontSize: 36),),
      Text('four', style: TextStyle(fontSize: 36),)
    ];

    return MaterialApp(
      home: new Scaffold(
        body: pageOptions[_selectedPage],
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text('Home')
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.rss_feed),
                  title: Text('feed')
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.featured_play_list),
                  title: Text('list')
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.settings),
                  title: Text('settings')
              ),
            ],
            currentIndex: _selectedPage, // expecting different icons to be selected based on this index which is being selected in the set state below. Not seeing any change.
            onTap: (int index){
              setState(() {
                _selectedPage = index; // being assigned correctly yet no effect
              });
            },
        ),
      ),
    );
  }
}

【问题讨论】:

    标签: dart flutter


    【解决方案1】:

    将 _selectPage 和 pageOptions 放在 initState 或构建方法之外,以防止在调用 setState 时重新构建

    int _selectedPage;
    List<Widget> pageOptions;
        @override
          void initState() {
            super.initState();
             _selectedPage = 0;
            pageOptions = [
              Text('one1', style: TextStyle(fontSize: 36),), // always remains on this data. No change even when set stae changes to different index.
              Text('two', style: TextStyle(fontSize: 36),),
              Text('three', style: TextStyle(fontSize: 36),),
              Text('four', style: TextStyle(fontSize: 36),)
            ];
          }  
    

    每当您调用 setState 时,都会发生导致小部件重建的更改。这意味着您的构建方法将被再次调用。当它被调用时,_selectedPage 将再次设置为 0,并且 pageOptions[0] 将始终是选定的小部件。

    【讨论】:

    • 我可以试一试,但有点困惑为什么会这样。我希望它在我设置状态时改变。这不是要锁定数据永不改变吗?
    • 让我更新我的答案,以便在您尝试时更好地解释。
    • 有效,是的,我明白你的意思。现在它不会每次都初始化并返回到初始设置。谢谢。
    猜你喜欢
    • 1970-01-01
    • 2013-05-29
    • 2017-11-27
    • 1970-01-01
    • 1970-01-01
    • 2019-11-30
    • 2017-03-03
    • 1970-01-01
    • 2015-06-10
    相关资源
    最近更新 更多