如何在flutter中创建自定义tabBar答案

【问题标题】：How to create a custom tabBar in flutter如何在flutter中创建自定义tabBar
【发布时间】：2019-11-24 01:31:15
【问题描述】：

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

【问题讨论】：

你尝试了什么？
我尝试了一些解决方案，但我找不到解决方案 |
我想我会在本周晚些时候为你想要的东西制作一个包，因为我也需要它，但请使用下面的 pageView 查看我的解决方案！
另外，我认为这值得一试：stackoverflow.com/questions/50609252/…

标签： flutter dart flutter-layout

【解决方案1】：

我会从一个水平滚动的listView 开始，然后构建数千个ListTile 元素，并使它们可点击。如果您想刷卡，请添加gesturedetector。

【讨论】：

TabController 怎么样？？我想要一个自定义的 tabBar 而不仅仅是列表视图
如果你指的是带有“TabController”的可拖动功能，那么你可以使用 GestureDragStartCallback 看到这个api.flutter.dev/flutter/gestures/GestureDragStartCallback.html 并且你可以添加一个函数来改变页面，当指针水平拖动时。

【解决方案2】：

您可以创建具有相同视图的自定义列表。这是示例代码

ListView.builder(
              itemBuilder: (_, count) {
                return Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10.0),
                      color: Colors.green),
                  child: GestureDetector(
                    onTap: (){
                      print("You clicked");
                    },
                    child: Text(
                      list[count],
                      style: TextStyle(color: Colors.white, fontSize: 12),textAlign: TextAlign.center,
                    ),
                  ),
                );
              },
              itemCount: list.length,
              scrollDirection: Axis.horizontal,
            )

【讨论】：

如果可能我更喜欢使用颤振 TabController 和 TabBar

【解决方案3】：

尝试使用“NestedScrollView”，将标签栏外的信息放在“flexibleSpace”中

【讨论】：

【解决方案4】：

PageView 和 PageController

所以这不是您要寻找的，而不是底部栏，您可以进行水平滚动 (scrollView)，但我希望这能将您推向正确的方向。此代码基本上使用pageView 来显示页面，并且由于有一个页面控制器，您可以为任何按钮或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")
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

【讨论】：