颤动中的多个选项卡/页面视图

如何在页面对应于底部导航栏中的选项卡的情况下创建多页视图，以便与页面对应的窗口小部件仅构建一次，并且按需构建。。颤动中的多个选项卡/页面视图

对于例如，考虑两个标签一个简单的Facebook应用程序UI样的 - 饲料与以下行为的通知：

无论饲料和通知的产品清单弄来了网络。
假设原始选项卡是供稿，只有在用户单击通知选项卡时才会提取通知
如果用户滚动供稿并单击通知图标，然后再次单击供稿图标，则滚动位置应该记住。

如果我使用TabBarView，它会在每次更改标签时重新生成小部件，因此不保留滚动位置。

2017-09-04 aptik

约BottomNavigationBar，看到这个https://stackoverflow.com/questions/45235570/how-to-use-bottomnavigationbar-with-navigator/45992604#45992604 如果你想TabBarView，使用PageStorageKey到你的内页。 – najeira

要给页面TabBarView一个独特的滚动位置存储容器，请使用PageStorageKey。

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     home: new MyHomePage(), 
    ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    @override 
    State createState() => new MyHomePageState(); 
} 

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { 
    TabController _controller; 
    int _tab = 0; 

    @override 
    void initState() { 
    _controller = new TabController(length: 2, vsync: this); 
    } 

    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(title: new Text('Example App')), 
     body: new TabBarView(
     controller: _controller, 
     children: <Widget>[ 
      new ListView.builder(
      key: new PageStorageKey('feed'), 
      itemBuilder: (BuildContext context, int index) { 
       return new ListTile(
       title: new Text('Feed Item $index'), 
      ); 
      }, 
     ), 
      new ListView.builder(
      key: new PageStorageKey('notifications'), 
      itemBuilder: (BuildContext context, int index) { 
       return new ListTile(
       title: new Text('Notification $index'), 
      ); 
      }, 
     ), 
     ], 
    ), 
     bottomNavigationBar: new BottomNavigationBar(
     onTap: (int value) { 
      _controller.animateTo(value); 
      setState(() { 
      _tab = value; 
      }); 
     }, 
     currentIndex: _tab, 
     items: <BottomNavigationBarItem>[ 
      new BottomNavigationBarItem(
      icon: new Icon(Icons.home), 
      title: new Text('Home'), 
     ), 
      new BottomNavigationBarItem(
      icon: new Icon(Icons.notifications), 
      title: new Text('Notifications'), 
     ), 
     ], 
    ), 
    ); 
    } 
}

来源

2017-09-05 03:18:15

颤动中的多个选项卡/页面视图

回答

相关问题