在 Flutter 中为选项卡添加底部边框

Question

我想要做的是添加 tabBar 的底部边框，因此它将位于选项卡标题下方和指示器颜色上方，以及活动和非活动选项卡，就像附加的图像一样。

红线是我要添加的，绿线是指标颜色。

请注意，通常我使用 'bottom' 为 appBar 执行此操作，但这里的底部保留给 TabBar。

这可能吗？

非常感谢

Answer 1

您可以按照 abdulrahmanAbdullah 的说明设置 AppBarshape属性。但如果您严格需要指示器上方的边框，则可以将其放在每个选项卡栏项目内。这是对此的一种看法：

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}



class TabBarDemo extends StatelessWidget {

  Widget _createTab(String text) {
    return Tab(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: Container(
              child: Center(child: Text(text)),
              decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.black)))
            )
          ),
        ]
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            elevation: 0,
            bottom: TabBar(
              labelPadding: EdgeInsets.all(0),
              tabs: [
                _createTab("Tab 1"),
                _createTab("Tab 2"),
                _createTab("Tab 3"),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

尝试设置 appBar 边框：

appBar: AppBar(
    shape: Border(bottom: BorderSide(color: Colors.red)),
     .... 

Answer 3

只需将TabBar包装到DecoratedBox中，如下所示：

DecoratedBox(
    decoration: BoxDecoration(
    //This is for background color
    color: Colors.white.withOpacity(0.0),

    //This is for bottom border that is needed
    border: Border(
        bottom: BorderSide(color: AppColors.color4, width: 2.sp)),
    ),
    child: TabBar(
        ...
    ),
),

希望您能得到帮助。