flutter 删除抖动选项卡栏底部边框

u59ebvdq  于 2023-02-05  发布在  Flutter
关注(0)|答案(6)|浏览(211)

我尝试使用PreferredSize创建一个自定义标签栏,但是我无法将标签栏的颜色与正文融合,标签栏和正文之间似乎有一个边框。下面的图片将清楚地向您展示我试图完成的任务。

我试过创建一个与大宽度的主体颜色相同的边框,但似乎不起作用。以下是我的代码:

Widget _buildAppBar(context) {
return AppBar(
  title: Text(title),
  elevation: 0,
  flexibleSpace: Image.asset(
    'images/motif_batik_01.jpg',
    fit: BoxFit.cover,
    width: 1200,
  ),
  bottom: _buildTabBar(context)
);

}

Widget _buildTabBar(context) {
return PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: Container(
    decoration: BoxDecoration(
      color: Theme.of(context).backgroundColor,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(50),
        topRight: Radius.circular(50),
      ),
    ),
    padding: EdgeInsets.only(
      top: 50,
      left: 20,
      right: 20,
    ),
    height: 100,
    child: TabBar(
      indicator: BoxDecoration(
        color: Colors.orange, borderRadius: BorderRadius.circular(20)
      ),
      labelStyle: TextStyle(color: Colors.white),
      unselectedLabelColor: Colors.orange,
      tabs: <Widget>[
        Tab(child: Text('A', style: TextStyle(fontSize: 18.0))),
        Tab(child: Text('B', style: TextStyle(fontSize: 18.0))),
      ],
    ),
  )
);

}
编辑注解:我发现如果我的“preferedSize”是40.0(40.0,80.0)的乘法,那么这条线就会消失,这会不会是Flutter本身的一个bug?

xlpyo6sf

xlpyo6sf1#

为tabBar添加指示器颜色,为transparent添加颜色。
indicatorColor: Colors.transparent

agxfikkp

agxfikkp2#

indicator:BoxDecoration()indicatorColor:Colors.transparent

nc1teljy

nc1teljy3#

无论你在body中返回什么,都将它 Package 在下面的代码中。不要忘记关闭括号。

MediaQuery.removePadding(
context: context,
removeTop: true,
jm2pwxwz

jm2pwxwz4#

为tabBar添加分隔线颜色,为transparent添加颜色。
dividerColor: Colors.transparent

jhiyze9q

jhiyze9q5#

您是否尝试过将包含TabBar的AppBar的标高设置为0,

final topBar = AppBar(
      elevation: 0.0, <------------ here
      backgroundColor: Colors.white,
      bottom: TabBar(
        indicatorColor: Colors.black,
        indicatorWeight: 2.0,
        indicatorSize: TabBarIndicatorSize.tab,
        tabs: [
          Tab(
              child: Text(
            'Tab one',
            style: headerTextStyle,
          )),
          Tab(
              child: Text(
            'Tab two',
            style: headerTextStyle,
          )),
        ],
      ),
    );
2g32fytz

2g32fytz6#

现在

TabBar(  indicator: UnderlineTabIndicator(
            insets: EdgeInsets.all(5),
          ),
          indicatorWeight: 0,
          indicatorSize: TabBarIndicatorSize.tab,
          labelPadding: EdgeInsets.all(0), )

相关问题