直播app开发，flutter 状态栏 AppBar 设置透明和半透明

直播app开发，flutter 状态栏 AppBar 设置透明和半透明

一、设置AppBar 状态栏半透明

在AppBar 中，设置状态栏全透明需要设置两个属性：

 

通过设置 backgroundColor 属性为完全透明 (Colors.transparent) 或半透明（不透明度小于 1 的颜色）

通过设置 elevation 属性设置为零以移除阴影（默认情况下，Flutter 中的材质应用栏有阴影）

 

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("tiger"),
        backgroundColor: Colors.green.withOpacity(0.6),
        elevation: 0.0,
      ),
      body: Image.asset("assets/images/back_img.png"),
    );
  }

​

 

二、设置AppBar 状态栏透明

上面我们设置了状态栏为半透明的状态，那么要设置状态栏全透明的话，只有要把appbar 组件的 backgroundColor 设置为透明（transparent）就可以了。

 

Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: Text("tiger"),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      body: Image.asset("assets/images/back_img.png"),
    );
  }
 

 

三、带有颜色渐变的半透明状态栏

前面记录状态栏透明和半透明的设置，那么如果产品突然抽风，需要带有渐变色的透明状态栏，我们该怎么办呢？这里我们就需要使用到 flexibleSpace 属性的设置了，我们只需要自定义一个container 就可以实现。

 

Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: Text("tiger"),
        actions: [
          TextButton.icon(
            onPressed: () {},
            icon: Icon(
              Icons.settings,
              color: Colors.white,
            ),
            label: Text(
              "设置",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ],
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [
                Colors.green.withOpacity(0.5),
                Colors.yellow.withOpacity(0.7),
                Colors.blue.withOpacity(0.6),
              ],
            ),
          ),
        ),
      ),
      body: Image.asset("assets/images/back_img.png"),
    );

 

 以上就是 直播app开发，flutter 状态栏 AppBar 设置透明和半透明，更多内容欢迎关注之后的文章