Flutter 设置appbar 透明且是渐变色

要将 Flutter 中的 AppBar 设置为透明,可以通过将 backgroundColor 属性设置为 Colors.transparent,并将 elevation 设置为 0 来移除阴影。这样,AppBar 将不会有背景色或阴影效果,使其完全透明。最重要的一点是设置extendBodyBehindAppBar 为true 。

原理是取消appbar的颜色,使用自定义的Container来代替appbar

@override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("首页"),
        // 设置背景透明
        backgroundColor: Colors.transparent,
      ),
      // 让body延伸到AppBar后面 如果不延伸,也不会是透明
      extendBodyBehindAppBar: true,
      body: bodyView(),
    );
  }

  bodyView() {
    return Container(
      // kToolbarHeight 是appbar 高度
      padding:
          EdgeInsets.only(top: ScreenUtil().statusBarHeight + kToolbarHeight),
      // 整个界面渐变色
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFFD1EDFF), Color(0x00C3E4FA)],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverToBoxAdapter(
              child: Container(
                clipBehavior: Clip.hardEdge,
                margin: EdgeInsets.fromLTRB(16.w, 12.h, 16.w, 16.h),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.r),
                ),
                child: Image.network(
                  "https://www.vuv-tech.com/u_file/images/20_06_19/9412f547d9.jpg",
                  width: double.infinity,
                  height: 200,
                  fit: BoxFit.fill,
                ),
              ),
            )
          ];
        },
        body: Column(
          children: [
            TabBar(
              tabs: tabs.map((e) => Text(e)).toList(),
              controller: tabController,
              labelPadding: EdgeInsets.symmetric(vertical: 10.h),
              dividerColor: Color(0x80D6D6D6),
              onTap: (value) {
                homeController.chooseIndex.value = value;
              },
              labelColor: Color(0xFF232427),
              labelStyle: TextStyle(
                fontWeight: FontWeight.bold,
              ),
              unselectedLabelColor: Color(0xFF65676E),
              unselectedLabelStyle: TextStyle(
                fontWeight: FontWeight.normal,
              ),
            ),
            Expanded(
              flex: 1,
              child: TabBarView(
                controller: tabController,
                children: tabbarView,
              ),
            )
          ],
        ),
      ),
    );
  }