如何解决选项卡上的对齐问题

时间:2019-07-19 16:37:15

标签: flutter dart

我想要这个标签栏,我的标签丑陋,以及如何添加分隔符?

please check

但是我尝试了标签栏, enter image description here

我的构建方法

  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: DashboardAppBar(),
          body: TabBarView(physics: NeverScrollableScrollPhysics(), children: [
            dashboardGridView(),
            Icon(Icons.directions_transit),
            Icon(Icons.directions_bike),
          ]),
        ));
  }

dashboardGridView()类

导入“ package:flutter / material.dart”;

class DashboardAppBar extends StatelessWidget implements PreferredSizeWidget {
  const DashboardAppBar({
    Key key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return AppBar(
       ...

我在AppBar底部属性上添加了标签栏

        bottom: TabBar(
           isScrollable: true,
            indicatorColor: Colors.black,
            controller: controller,
            indicator: UnderlineTabIndicator(

边界不正确,如何解决?

                borderSide: BorderSide(
                  width: 4,
                  color: Color(0xFF646464),
                ),
                insets: EdgeInsets.only(
                    left: 0,
                    right: 8,
                    bottom: 4)),
            labelPadding: EdgeInsets.only(left: 0, right: 0),
            tabs: [

第一个标签

              Tab(
                icon: Icon(Icons.people),
                text: 'Category',
              ),

第二个标签

              Tab(
                icon: Icon(Icons.chat_bubble_outline),
                text: 'My Enquiries',
              ),

我添加了她的按钮?是吗?

              Tab(
                  child: Container(
                    width: 100.0,
                    child: RaisedButton.icon(
                        icon: Icon(Icons.speaker),
                        label: Text(
                          'Promotions',
                          style: TextStyle(color: Colors.white),
                        ),),)),]));}
  @override
  Size get preferredSize => Size.fromHeight(130.0);
}

1 个答案:

答案 0 :(得分:0)

删除labelPadding: EdgeInsets.only(left: 0, right: 0),