如何在Flutter中设计带背景图的页眉和页脚？求实现示例

以下是可直接运行的示例代码，帮你实现图中样式的带背景图页眉与页脚：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Header/Footer Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 自定义带背景图的页眉
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(65.0),
        child: Stack(
          children: [
            // 页眉背景图容器
            Container(
              width: double.infinity,
              height: double.infinity,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage('https://your-image-url.com/header-bg.png'), // 替换为你的背景图地址
                  fit: BoxFit.cover,
                ),
              ),
            ),
            // 页眉内容（居中标题+返回按钮）
            Align(
              alignment: Alignment.centerLeft,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Row(
                  children: [
                    IconButton(
                      icon: const Icon(Icons.arrow_back, color: Colors.white),
                      onPressed: () => Navigator.pop(context),
                    ),
                    const Spacer(),
                    const Text(
                      '我的页面',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 22,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    const Spacer(),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      body: const Center(
        child: Text('页面主体区域'),
      ),
      // 自定义带背景图的页脚
      bottomNavigationBar: Container(
        height: 60.0,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: NetworkImage('https://your-image-url.com/footer-bg.png'), // 替换为你的背景图地址
            fit: BoxFit.cover,
          ),
        ),
        child: const Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.home, color: Colors.white),
                Text('首页', style: TextStyle(color: Colors.white, fontSize: 12)),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.shopping_cart, color: Colors.white),
                Text('购物车', style: TextStyle(color: Colors.white, fontSize: 12)),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.person, color: Colors.white),
                Text('我的', style: TextStyle(color: Colors.white, fontSize: 12)),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

核心实现要点： #

• 页眉通过PreferredSize自定义，解决默认AppBar无法直接设置背景图的问题，同时固定高度
• 用Stack实现背景图与内容的层叠，背景图在底层，文字/按钮等内容在上层
• 背景图通过DecorationImage配置，fit: BoxFit.cover保证图片铺满容器且比例正常
• 页脚直接利用bottomNavigationBar属性，搭配Container实现带背景的底部导航栏
• 如果使用本地图片，将NetworkImage替换为AssetImage('assets/images/xxx.png')，并在pubspec.yaml中配置资源路径

内容的提问来源于stack exchange，提问作者krishna