flutter - 如何在 flutter 中创建自定义 tabBar

Question

我想在我的体内实现一个自定义的可滚动 TabBar，而不是在 appBar 中

Answer 1

PageView 和 PageController

所以这并不是您要找的东西，您可以水平滚动 (scrollView) 而不是底部栏，但我希望这能将您推向正确的方向。此代码基本上使用 pageView 来显示页面，并且由于有一个页面 Controller ，您可以为特定页面的任何按钮或 onPress 设置动画。

如有任何问题，请告诉我!

import 'package:flutter/material.dart';

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

  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  int _selectedIndex = 0;

  PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tab Bar"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[ 
            Expanded(
              flex: 10,
              child: ButtonBar(
                alignment: MainAxisAlignment.center,
                children: <Widget>[
                  FlatButton(
                    splashColor: Colors.blueAccent,
                    color: Colors.blue,
                    onPressed: () {
                      _pageController.animateToPage(0, duration: Duration(milliseconds: 500), curve: Curves.ease);
                    },
                    child: Text("One",),
                  ),
                  FlatButton(
                    splashColor: Colors.blueAccent,
                    color: Colors.blue,
                    onPressed: () {
                      _pageController.animateToPage(1, duration: Duration(milliseconds: 500), curve: Curves.ease);
                    },
                    child: Text("Two",),
                  ),
                  FlatButton(
                    splashColor: Colors.blueAccent,
                    color: Colors.blue,
                    onPressed: () {
                      _pageController.animateToPage(2, duration: Duration(milliseconds: 500), curve: Curves.ease);
                    },
                    child: Text("Three",),
                  )
                ],
              ),
            ),
            Expanded(
              flex: 40,
              child: PageView(
                controller: _pageController,
                children: [
                  Text("Page One"),
                  Text("Page Two"),
                  Text("Page Three")
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这基本上允许您使用任何您不会切换页面的标签栏或按钮，同时保持滑动功能:-)