Flutter教程仿小米商城透明导航

在Flutter中实现小米商城那样的透明导航栏时遇到了几个问题：

  1. AppBar的透明度调整后，滚动时如何保持底部内容不被遮挡？
  2. 当页面滑动时，导航栏颜色如何像小米商城那样渐变过渡？
  3. 导航栏中的标题和按钮在透明背景下如何保证清晰可见？
  4. 有没有办法让导航栏在页面顶部完全透明，随着滚动逐渐出现背景色？

希望有经验的开发者能分享具体代码实现或推荐相关插件。

3 回复

要实现小米商城那样的透明导航栏，首先需要设置 AppBar 的背景为透明。在 Flutter 中可以这样写：

appBar: AppBar(
  backgroundColor: Colors.transparent,
  elevation: 0.0, // 去掉阴影
),

接着，为了让内容不被状态栏遮挡，可以使用 SystemChrome 来调整系统UI模式：

import 'package:flutter/services.dart';

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent, // 状态栏透明
));

最后，在 Scaffold 的 extendBodyBehindAppBar: true 属性来让页面内容延伸到导航栏后面。完整代码如下：

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));
  return Scaffold(
    extendBodyBehindAppBar: true,
    appBar: AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0.0,
    ),
    body: Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/background.jpg'),
          fit: BoxFit.cover,
        ),
      ),
      child: Center(child: Text('小米商城')),
    ),
  );
}

记得根据需求调整状态栏颜色和图片等细节！

更多关于Flutter教程仿小米商城透明导航的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


要实现小米商城那种透明导航栏效果，首先需要设置 AppBar 的 backgroundColor 为 Colors.transparent。然后调整系统状态栏的颜色，可以使用 SystemChrome.setSystemUIOverlayStyle() 方法，比如设置 statusBarColor 为透明或浅灰色。接着给 Scaffold 的 body 增加一个 SafeArea 包裹，防止内容被刘海屏等遮挡。

在 appBar 的 elevation 属性设为 0，去掉默认阴影。如果需要模糊效果，可以用 BackdropFilter 和 Blur 命令添加背景模糊。另外，记得将内容的顶部留出状态栏高度的空间，避免遮挡重要信息。

示例代码如下：

import 'package:flutter/services.dart';

Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    elevation: 0.0,
  ),
  body: SafeArea(
    child: Container(),
  ),
);

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
));

Flutter实现小米商城透明导航栏

要实现类似小米商城的透明导航栏效果，你可以使用Flutter的AppBar组件并设置其透明度属性。以下是实现步骤和代码示例：

实现代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        extendBodyBehindAppBar: true, // 关键属性，使内容延伸到AppBar后面
        appBar: AppBar(
          backgroundColor: Colors.transparent, // 透明背景
          elevation: 0, // 去除阴影
          leading: IconButton(
            icon: Icon(Icons.menu, color: Colors.white),
            onPressed: () {},
          ),
          actions: [
            IconButton(
              icon: Icon(Icons.search, color: Colors.white),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.shopping_cart, color: Colors.white),
              onPressed: () {},
            ),
          ],
        ),
        body: Stack(
          children: [
            Image.network(
              'https://i8.mifile.cn/v1/a1/T1wZDvB5Kv1RXrhCrK.jpg',
              fit: BoxFit.cover,
              height: double.infinity,
              width: double.infinity,
            ),
            // 其他页面内容...
          ],
        ),
      ),
    );
  }
}

关键点说明

  1. extendBodyBehindAppBar: true - 允许页面内容延伸到AppBar下方
  2. backgroundColor: Colors.transparent - 设置AppBar背景为透明
  3. elevation: 0 - 去除AppBar的阴影效果
  4. 图标颜色设置为白色以在深色背景上可见

滚动时动态效果

如果你想要滚动时动态改变透明度，可以使用SliverAppBar配合CustomScrollView实现更复杂的效果。

这种透明导航栏效果特别适合首页有背景图片或视频的场景，能够提供沉浸式的用户体验，类似小米商城的首页设计。

回到顶部