顫動中的多個選項卡/頁面視圖

如何在頁面對應於底部導航欄中的選項卡的情況下創建多頁視圖，以便與頁面對應的窗口小部件僅構建一次，並且按需構建。。顫動中的多個選項卡/頁面視圖

對於例如，考慮兩個標籤一個簡單的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

顫動中的多個選項卡/頁面視圖

回答

相關問題