设置toolbarHeight后AppBar底部出现细线的Flutter技术求助

问题描述 #

我尝试让Scaffold的AppBar与body顶部组件使用相同的渐变背景色，通过设置toolbarHeight属性指定AppBar高度后，两者之间出现了一条意外的细线。网上找到的设置backgroundColor与flexibleSpace容器同色的解决方案，因使用渐变背景无法套用。

相关代码 #

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: const CloneMyHomePage(),
    );
  }
}

const LinearGradient appBarGradient = LinearGradient(
  colors: [
    Color.fromARGB(255, 29, 201, 192),
    Color.fromARGB(255, 125, 221, 216),
  ],
  stops: [0.5, 1.0],
);

class CloneMyHomePage extends StatelessWidget {
  const CloneMyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // backgroundColor: Color.fromARGB(255, 125, 221, 216),
        toolbarHeight: 100.0,
        bottomOpacity: 0.0,
        elevation: 0.0,
        flexibleSpace: Container(
          decoration: const BoxDecoration(
            // color: Color.fromARGB(255, 125, 221, 216),
            gradient: appBarGradient,
          ),
        ),
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              alignment: Alignment.topLeft,
              child: Text(
                "My title",
                style: TextStyle(color: Colors.black),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(left: 15, right: 15),
              child: Row(
                children: const [
                  Padding(
                    padding: EdgeInsets.only(right: 15),
                    child: Icon(Icons.notifications_outlined),
                  ),
                  Icon(Icons.search),
                ],
              ),
            ),
          ],
        ),
      ),
      body: Column(
        children: [BelowAppBar()],
      ),
    );
  }
}

class BelowAppBar extends StatelessWidget {
  const BelowAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        // color: Color.fromARGB(255, 125, 221, 216),
        gradient: appBarGradient,
      ),
      padding: const EdgeInsets.only(
        left: 10,
        right: 10,
        bottom: 10,
      ),
      child: Row(
        children: [
          RichText(
            text: TextSpan(
              text: 'Hello, ',
              style: const TextStyle(
                fontSize: 22,
                color: Colors.black,
              ),
              children: [
                TextSpan(
                  text: "Dung",
                  style: const TextStyle(
                    fontSize: 22,
                    color: Colors.black,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

问题现象 #

AppBar与body顶部的渐变组件之间存在一条细微的分割线，破坏了渐变背景的连续性。

解决方案 #

方案一：设置AppBar背景为透明并确保渐变容器占满空间 #

修改AppBar的配置，将backgroundColor设为透明，同时让flexibleSpace的容器占满整个AppBar的高度，消除内部布局间隙：

appBar: AppBar(
  backgroundColor: Colors.transparent, // 关键：设置为透明
  toolbarHeight: 100.0,
  elevation: 0.0,
  flexibleSpace: Container(
    width: double.infinity,
    height: double.infinity, // 确保容器填满AppBar
    decoration: const BoxDecoration(
      gradient: appBarGradient,
    ),
  ),
  // 原有标题代码保持不变
),

方案二：用PreferredSizeWidget自定义顶部栏（推荐） #

完全抛弃AppBar的默认布局，自定义一个顶部栏组件，彻底避免AppBar自带的像素级间隙：

appBar: PreferredSize(
  preferredSize: const Size.fromHeight(100.0),
  child: Container(
    decoration: const BoxDecoration(gradient: appBarGradient),
    padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text("My title", style: const TextStyle(color: Colors.black)),
        Row(
          children: const [
            Padding(
              padding: EdgeInsets.only(right: 15),
              child: Icon(Icons.notifications_outlined),
            ),
            Icon(Icons.search),
          ],
        ),
      ],
    ),
  ),
),

方案三：负margin临时修复 #

给body的顶部组件设置负的顶部margin，抵消细线间隙，适合快速临时解决：

class BelowAppBar extends StatelessWidget {
  const BelowAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: -1.0), // 负margin抵消细线
      decoration: const BoxDecoration(
        gradient: appBarGradient,
      ),
      // 原有padding和子组件代码保持不变
    );
  }
}

问题原因 #

这条细线通常是AppBar默认的backgroundColor（即使设置了elevation:0）与flexibleSpace容器之间的像素级渲染间隙，或是布局对齐时的抗锯齿效果导致。设置透明背景可消除AppBar自身背景的干扰，自定义顶部栏则从根源上规避了AppBar的内部布局限制。

内容的提问来源于stack exchange，提问作者Nguyễn Quốc Dũng