Question

我需要将导航栏设置为透明，但不隐藏。如左侧的YouTube音乐示例。

我尝试了几种方法，每当将其定义为透明时，条形都是白色的。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  systemNavigationBarColor: Colors.transparent,
  systemNavigationBarDividerColor: Colors.transparent,
));

请查看右侧的图像。我只需要白色部分透明即可，手势指示器需要保持可见。有人可以帮我吗？

Answer 1

我没有尝试，但是我认为这应该起作用

Container(
  color: Colors.black,
  child: SafeArea(
    child: YourWidget(),
  )
)

Answer 2

我认为您无需使用SystemChrome类就可以实现。一种实现方法是用BottomNavigationBar小部件包装Theme并使用其canvasColor属性并为其分配Colors.transparent，如下所示：

bottomNavigationBar: Theme(
        data: Theme.of(context)
            .copyWith(canvasColor: Colors.transparent),
        child: BottomNavigationBar(
          currentIndex: 0,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text('Home')),
            BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text('Home')),
            BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text('Home'))
          ],
        ),
      ),

以上将导致如下所示：

为了删除shadow effect，请使用elevation属性并将0传递给它，这将导致透明的navigation bar，如下所示：

这样，如果您更改支架的背景颜色，则导航栏将以透明颜色显示。

希望这能回答您的问题

Answer 3

将导航栏放入容器中，然后不给容器添加任何颜色，它将自动将颜色设置为透明。要使容器与底部对齐，可以执行此操作。希望此方法有效。

颤动

Align(
              alignment: Alignment.bottomLeft,
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: 50.0,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[

                  ],
                ),
              ),
            )

将手势栏颜色设置为透明[颤振]

3 个答案: