如何删除 Flutter 中两个 TabController 之间的 Padding 或 Margin

Question

我在 flutter 中创建了两个嵌套的 TabController 但我在两个选项卡之间有很大的边距或填充

你可以在下图中看到这个space

我想减少这个填充或边距，但我不知道该怎么做？

这是我的主页组件代码：

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
        return DefaultTabController(
        initialIndex: 5,
        length: 6,
        child: Scaffold(
          endDrawer: Directionality(
          textDirection: TextDirection.rtl, child: NavMenu() ),
          appBar: AppBar(
            title: Text("داشبورد"),
            bottom: TabBar(
              tabs: [
                Tab(
                  child: Container(
                    child: Text(
                      'چت',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      'نردیان',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      'خرگوش',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      'کامی',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      'همون',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      ' نردبان',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
              ],
              isScrollable: true,
              indicatorColor: Colors.white,
              indicatorWeight: 6.0,
            ),
          ),

          body: TabBarView(
            children: [
              ChatTabs(0xffff1111),
              ChatTabs(0xffff1111),
              ChatTabs(0xffff1111),
              ChatTabs(0xffff1111),
              ChatTabs(0xffff1111),
              NardebanTabs(0xffff1111)
            ],
            
          ),
        ));
  }
}

这是我的子选项卡组件 (ChatTabs)：

@override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 6,
      child: Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          backgroundColor: Colors.blue,
          elevation: 0,
          bottom: TabBar(
            controller: _tabController,
            isScrollable: true,
            indicatorWeight: 3.0,
            indicatorColor: Colors.white,
            unselectedLabelColor: Colors.white,
            tabs: [
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 0
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 0
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 1
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 1
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 2
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 2
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 3
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 3
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 4
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 4
                            ? Colors.white
                            : Colors.white70)),
              ),
              Tab(
                icon: Icon(Icons.notifications,
                    color: _tabController.index == 5
                        ? Colors.white
                        : Colors.white70),
                child: Text('اجرمجر',
                    style: TextStyle(
                        color: _tabController.index == 5
                            ? Colors.white
                            : Colors.white70)),
              ),
            ],
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            Ladder(),
            Container(
              height: 200.0,
              child: Center(child: Text('گوج')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('هع')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('سن الله')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('اجر اصیل')),
            ),
            Container(
              height: 200.0,
              child: Center(child: Text('اجر شش سیلندر')),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

你的聊天选项卡class应用栏高度有问题，将chattabs应用栏中的toolbarHeight修改为1

@override
 Widget build(BuildContext context) {
  return DefaultTabController(
  length: 6,
  child: Scaffold(
    appBar: AppBar(
      toolbarHeight: 1,
      automaticallyImplyLeading: false,
      backgroundColor: Colors.blue,
      elevation: 0,
      bottom: TabBar(
        controller: _tabController,
        isScrollable: true,
        indicatorWeight: 3.0,
        indicatorColor: Colors.white,
        unselectedLabelColor: Colors.white,
        tabs: [
          Tab(
            icon: Icon(Icons.notifications,
                color: _tabController.index == 0
                    ? Colors.white
                    : Colors.white70),
            child: Text('اجرمجر',
                style: TextStyle(
                    color: _tabController.index == 0
                        ? Colors.white
                        : Colors.white70)),
          ),
          Tab(
            icon: Icon(Icons.notifications,
                color: _tabController.index == 1
                    ? Colors.white
                    : Colors.white70),
            child: Text('اجرمجر',
                style: TextStyle(
                    color: _tabController.index == 1
                        ? Colors.white
                        : Colors.white70)),
          ),
          Tab(
            icon: Icon(Icons.notifications,
                color: _tabController.index == 2
                    ? Colors.white
                    : Colors.white70),
            child: Text('اجرمجر',
                style: TextStyle(
                    color: _tabController.index == 2
                        ? Colors.white
                        : Colors.white70)),
          ),
          Tab(
            icon: Icon(Icons.notifications,
                color: _tabController.index == 3
                    ? Colors.white
                    : Colors.white70),
            child: Text('اجرمجر',
                style: TextStyle(
                    color: _tabController.index == 3
                        ? Colors.white
                        : Colors.white70)),
          ),
          Tab(
            icon: Icon(Icons.notifications,
                color: _tabController.index == 4
                    ? Colors.white
                    : Colors.white70),
            child: Text('اجرمجر',
                style: TextStyle(
                    color: _tabController.index == 4
                        ? Colors.white
                        : Colors.white70)),
          ),
          Tab(
            icon: Icon(Icons.notifications,
                color: _tabController.index == 5
                    ? Colors.white
                    : Colors.white70),
            child: Text('اجرمجر',
                style: TextStyle(
                    color: _tabController.index == 5
                        ? Colors.white
                        : Colors.white70)),
          ),
        ],
      ),
    ),
    body: TabBarView(
      controller: _tabController,
      children: [
        Ladder(),
        Container(
          height: 200.0,
          child: Center(child: Text('گوج')),
        ),
        Container(
          height: 200.0,
          child: Center(child: Text('هع')),
        ),
        Container(
          height: 200.0,
          child: Center(child: Text('سن الله')),
        ),
        Container(
          height: 200.0,
          child: Center(child: Text('اجر اصیل')),
        ),
        Container(
          height: 200.0,
          child: Center(child: Text('اجر شش سیلندر')),
        ),
      ],
      ),
    ),
  );
  }
}

只需将此代码粘贴到 ChatTabs class

Answer 2

要删除填充，您可以在 TabController

之间设置一个 iconMargin 并减少一个 space

Tab(
  text: 'اجرمجر',
  icon: Icon(
    Icons.notifications,
    color: Colors.white,
  ),
  iconMargin: EdgeInsets.only(bottom: 10.0),
),

如何删除 Flutter 中两个 TabController 之间的 Padding 或 Margin

How to remove Padding or Margin between two TabController in Flutter

flutter

dart

padding

margin

tabbar