Flutter tabBar如何从上到下变化

Question

我是 Dart Flutter 的新手。

我遇到了这个问题，我按照创建标签栏的指南操作，但是在顶部，我想要实现的是让选项卡在底部而不是在顶部。

我已经尝试过 BottomNavigationBar 并全部更改，但没有用，导致所有应用程序崩溃。

请帮助我谢谢

child: Scaffold(
    body: DefaultTabController(
      length: 5,
      initialIndex: 2,
      child: Scaffold(
          appBar: AppBar(
            elevation: 0,
            backgroundColor: primaryColor,
            automaticallyImplyLeading: false,
            title: TabBar(

                labelColor: Colors.white,
                indicatorColor: Colors.white,
                unselectedLabelColor: Colors.black,
                isScrollable: false,
                indicatorSize: TabBarIndicatorSize.label,
                tabs: [
                  Tab(
                    icon: Icon(
                      Icons.person,
                      size: 30,
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.group,
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.whatshot,
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.notifications,
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.message,
                    ),
                  )
                ]),
          ),
          body: TabBarView(
            children: [
              Center(child: Profile(currentUser)),
              Center(child: Chanels()),
              Center(child: CardPictures(currentUser, users)),
              Center(child: Notifications(currentUser, notification)),
              Center(child: HomeScreen(currentUser, matches)),
            ],
            physics: NeverScrollableScrollPhysics(),
          )),
    ),
  ),

Answer 1

如果您知道如何使用标签栏，那么它对您来说很简单。根据您的需要，您可以在任何行列中以任何方式使用标签栏，最多 you.You 只需要为标签栏和 tabBarView 提供控制器，无论您如何使用标签，这两个控制器都必须相同 bar.You 几乎可以把tab-bar放在我自己做过的任何一个widget里，并排成一排。

Answer 2

您可以通过这种方式使用BottomNavigationBar()。您需要管理所有内容（例如监听选项卡事件并相应地呈现页面）。

原型:

class _TabsScreenState extends State<TabsScreen> {
  final var  _pages = [Screen1(),Screen2()];

  int page_index = 0;

  void _pageSelect(int index) {
    setState(() {
      page_index = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(),
      ),
      body: _pages[page_index],
      bottomNavigationBar: BottomNavigationBar(
        onTap: _pageSelect,
        backgroundColor: '',
        unselectedItemColor: '',
        selectedItemColor: '',
        currentIndex: page_index,

        items: [
          BottomNavigationBarItem(
            backgroundColor: '',
            icon: Icon(''),
            title: Text(''),
          ),
          BottomNavigationBarItem(
            backgroundColor: '',
            icon: Icon('),
            title: Text(''),
          ),
        ],
      ),
    );
  }
}

Answer 3

要将标签栏从上到下更改，我们必须使用 TabController 自定义 flutter 中的默认标签栏。这是一个例子：

import "package:flutter/material.dart";
import 'package:hexcolor/hexcolor.dart';

import 'LineChart.dart';
import 'LineChart1.dart';

class PortfolioGraph extends StatefulWidget {
  @override
  _PortfolioGraphState createState() => _PortfolioGraphState();
}

class _PortfolioGraphState extends State<PortfolioGraph> with TickerProviderStateMixin {
  int _currentindex = 0;
  List<Widget> _tabList = [
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),

  ];
  TabController _tabController;
  
  @override
  void initState(){
    super.initState();
    _tabController = TabController(vsync:this,length: 7);
  }
  @override
  void dispose(){
    _tabController.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      child:Column(
        children: [
          Container(
            height: 270,
            width:size.width,
          child:TabBarView(
                  
                  controller: _tabController,
                  children:_tabList
              ),
          ),

          Container(
      alignment: Alignment.topLeft,
      child: Container(
        height: 50,
        width:size.width,
        child: Container(
          child: Scaffold(
            appBar: AppBar(
              toolbarHeight: 50,
              // leadingWidth: 10,
              backgroundColor: Colors.white,
              elevation: 0,
              titleSpacing: 0,
              centerTitle: false,

              bottom: PreferredSize(
                preferredSize: Size.fromHeight(40),
                child: Align(
                  alignment: Alignment.center,
                  child: TabBar(
                    controller: _tabController,

                    indicatorColor: HexColor("#199C78"),
                    indicatorWeight: 4,
                    unselectedLabelColor: HexColor("#8C8C8C"),
                    labelColor:HexColor("#3A3A3A"),
                    labelPadding: EdgeInsets.only(left: 0, right: 0),
                    labelStyle: TextStyle(fontSize: 14,fontWeight: FontWeight.bold),
                    unselectedLabelStyle: TextStyle(fontSize: 14),
                    isScrollable: false,

                    tabs: [
                      Tab(child:Container(

                        child: Text("1D"),
                      )),

                      Tab(child:Container(

                        child: Text("1W"),
                      )),
                      Tab(child:Container(

                        child: Text("1M"),
                      )),
                      Tab(child:Container(
                        child: Text("3M"),
                      )),
                      // SizedBox(width:10),
                      Tab(child:Container(
                        child: Text("6M"),
                      )),
                      Tab(child:Container(
                        child: Text("1YR"),)),
                      Tab(child:Container(
                        child: Text("All"),))
                    ],
                  ),
                ),
              ),
            ),

          ),
        ),
      ),
    )
        ],
      )
    );
  }
}

Flutter tabBar如何从上到下变化

Flutter tabBar how to change from top to buttom

user-interface

tabbar

dart

flutter