android - 为 Flutter 中的选项卡添加底部边框

Question

我想做的是添加 tabBar 的底部边框，这样它将位于选项卡标题下方和 indicatorColor 上方，对于 Activity 和非 Activity 选项卡，就像附加的图像一样。

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

请注意，通常我使用“bottom”为 appBar 执行此操作，但此处 bottom 保留给 TabBar。

这可能吗？

非常感谢

Answer 1

您可以像 abdulrahmanAbdullah 所说的那样设置 AppBar shape 属性。但是如果你确实需要指示符上方的边框，你可以将它放在每个标签栏项目的内部。这是一种看法:

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),
            ],
          ),
        ),
      ),
    );
  }
}