Wie implementiert man eine scrollbare Registerkarte auf dem unteren Bildschirm

Question

Newsvoice hat eine scrollbare Registerkarten am unteren Rand des Bildschirms auf einer unteren Leiste. Wie kann ich diese Benutzeroberfläche implementieren? Danke.

Answer 1

Hier ist ein Beispiel Code, der ein Column verwendet eine rollbaren TabBar und ein BottomNavigationBar im bottomNavigationBar Schlitz der Scaffold zu positionieren. Beachten Sie, dass die Registerkarten verschwinden, wenn Sie den zweiten Bildschirm ("Motorrad") mit einer AnimatedCrossFade auswählen.

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'), 
       ), 
       ], 
      ), 
      ], 
     ), 
    ), 
    ); 
    } 
}