如何在底部屏幕上實現可滾動選項卡

Question

Newsvoice在底部欄頂部的屏幕底部有一個可滾動選項卡。我怎樣才能實現這個用戶界面？ 謝謝。

Answer 1

下面是一個使用一個Column在Scaffold的bottomNavigationBar槽可滾動TabBar和BottomNavigationBar定位一些示例代碼。請注意，使用AnimatedCrossFade選擇第二個（「摩托車」）屏幕時，選項卡消失。

import 'package:flutter/material.dart'; 

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

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

class MyHomePage extends StatefulWidget { 
    MyHomePage({Key key}) : super(key: key); 

    @override 
    _MyHomePageState createState() => new _MyHomePageState(); 
} 

const List<String> tabNames = const<String>[ 
    'foo', 'bar', 'baz', 'quox', 'quuz', 'corge', 'grault', 'garply', 'waldo' 
]; 

class _MyHomePageState extends State<MyHomePage> { 

    int _screen = 0; 

    @override 
    Widget build(BuildContext context) { 
    return new DefaultTabController(
     length: tabNames.length, 
     child: new Scaffold(
     appBar: new AppBar(
      title: new Text('Navigation example'), 
     ), 
     body: new TabBarView(
      children: new List<Widget>.generate(tabNames.length, (int index) { 
      switch (_screen) { 
       case 0: return new Center(
       child: new Text('First screen, ${tabNames[index]}'), 
      ); 
       case 1: return new Center(
       child: new Text('Second screen'), 
      ); 
      } 
      }), 
     ), 
     bottomNavigationBar: new Column(
      mainAxisSize: MainAxisSize.min, 
      crossAxisAlignment: CrossAxisAlignment.stretch, 
      children: [ 
      new AnimatedCrossFade(
       firstChild: new Material(
       color: Theme 
        .of(context) 
        .primaryColor, 
       child: new TabBar(
        isScrollable: true, 
        tabs: new List.generate(tabNames.length, (index) { 
        return new Tab(text: tabNames[index].toUpperCase()); 
        }), 
       ), 
      ), 
       secondChild: new Container(), 
       crossFadeState: _screen == 0 
           ? CrossFadeState.showFirst 
           : CrossFadeState.showSecond, 
       duration: const Duration(milliseconds: 300), 
      ), 
      new BottomNavigationBar(
       currentIndex: _screen, 
       onTap: (int index) { 
       setState(() { 
        _screen = index; 
       }); 
       }, 
       items: [ 
       new BottomNavigationBarItem(
        icon: new Icon(Icons.airplanemode_active), 
        title: new Text('Airplane'), 
       ), 
       new BottomNavigationBarItem(
        icon: new Icon(Icons.motorcycle), 
        title: new Text('Motorcycle'), 
       ), 
       ], 
      ), 
      ], 
     ), 
    ), 
    ); 
    } 
}