flutter 删除标签栏上方的线条或阴影

lkaoscv7 于 2023-01-18 发布在 Flutter

关注(0)|答案(3)|浏览(345)

我在一个UI应用程序上工作。设法实现标签栏，但对标签栏上方的细线感到非常困惑。它要么是一条线，要么是阴影，不确定。已经运行了几个代码，但没有设法删除这条线。奇怪的是，它似乎工作的方式，我想在移动的（ chrome -移动版/平板电脑），但行弹出时，在网络版打开。
这就是问题所在（蓝色标签栏上方的单行）x1c 0d1x
这里是它，相同的代码时，打开在移动的模式.

没有线条的完美清晰。
我尝试了2个版本代码

DefaultTabController(
      length: 2,
      child: new Scaffold(
        appBar: new PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight),
          
          child: new Container(
            color: Theme.of(context).primaryColor,
            child: new SafeArea(
              child: Column(
                children: <Widget>[
                  new Expanded(child: new Container()),
                  new TabBar(
                    labelColor: Colors.white,
                    unselectedLabelColor: Colors.grey[700],
                    indicatorColor: Colors.white,
                    tabs: [
                      Tab(icon: Icon(Icons.chat)),
                      Tab(icon: Icon(Icons.filter_alt_outlined)),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
        body: TabBarView(

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          flexibleSpace: SafeArea(
            child: _tabBar,
          ),
          backgroundColor: Theme.of(context).primaryColor,
          elevation: 0,
        ),
        body: TabBarView(

他们两个工作，但结果是相同的.那细线之上的制表符栏坚持.我只是想到删除它.能任何人帮助吗？fullcode：github.com/CrazyBunnyz/Sociominer_V2/tree/error

flutter

来源：https://stackoverflow.com/questions/75130925/remove-line-or-shadow-above-tabbar

3条答案

按热度按时间

xghobddn1#

一种方法是将TabBar小部件 Package 在Container中，并为其提供decoration属性，该属性包含BoxDecoration，该BoxDecoration具有与应用背景颜色匹配的color。

Container(
    decoration: BoxDecoration(color: Colors.white, boxShadow: [
        BoxShadow(color: Colors.transparent, spreadRadius: 0, blurRadius: 0)
    ]),
    child: TabBar(
        tabs: [
            Tab(icon: Icon(Icons.home)),
            Tab(icon: Icon(Icons.search)),
            Tab(icon: Icon(Icons.settings)),
        ],
    ),
)

另一种方法是创建全局CSS类并将box-shadow属性设置为none。

<style>
    .tabbar {
        box-shadow: none;
    }
</style>

并将该类应用于标签栏小部件。

TabBar(
    tabs: [
        Tab(icon: Icon(Icons.home)),
        Tab(icon: Icon(Icons.search)),
        Tab(icon: Icon(Icons.settings)),
    ],
    className: 'tabbar',
),

需要注意的是，在某些情况下，标签栏线不是阴影，而是边界，在这种情况下，您可以使用border-top: none来删除它。
或者您可以尝试使用Ink widget。

Ink(
  splashColor: Colors.transparent,
  child: TabBar(
    tabs: [
      Tab(icon: Icon(Icons.home)),
      Tab(icon: Icon(Icons.search)),
      Tab(icon: Icon(Icons.settings)),
    ],
  ),
)

赞(0）回复(0）举报 2023-01-18

rt4zxlrg2#

将indicatorColor更改为透明。
您已将指示器颜色设置为白色。
将其替换为indicatorColor: Colors.transparent,
会成功的。