如何在底部屏幕上实现可滚动选项卡

Posted 2023-02-23

【中文标题】如何在底部屏幕上实现可滚动选项卡

【英文标题】：How to implements a scrollable tab on the bottom screen

【发布时间】：2017-10-22 15:29:19

【问题描述】：

Newsvoice 在底部栏顶部的屏幕底部有一个可滚动的标签。我怎样才能实现这个用户界面？ 谢谢。

【参考方案1】：

下面是一些示例代码，它使用Column 将可滚动的TabBar 和BottomNavigationBar 定位到bottomNavigationBar 的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'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  

【讨论】：

我不知道 bottomNavigationBar 接受 Widget 类型！我期待像 AppBar 这样的限制。谢谢科林。