Flutter如何在AppBar下方添加带文本Container且保留原有渐变背景

问题原因 #

你之前的渐变背景仅作用在局部，核心是承载渐变的Container没有铺满整个Scaffold的body区域，外层的Center组件会默认让子组件仅适配自身内容大小，新增组件后结构变化就会导致渐变范围被压缩。

正确实现方案 #

把承载渐变的Container设置为铺满全屏，再在它的内部嵌套布局组件放置你需要新增的内容即可，修改后的完整代码如下：

import 'package:flutter/material.dart';
import 'package:local_food_vrhnika/sidebar.dart';
import 'package:local_food_vrhnika/style/style.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        backgroundColor: rdecaDva,
        shadowColor: Colors.black,
        centerTitle: true,
        title: RichText(
            text: TextSpan(
                style: TextStyle(fontWeight: FontWeight.bold),
                children: [
              TextSpan(
                  text: 'Local',
                  style:
                      naslov(textStyle: TextStyle(color: tekst, fontSize: 25))),
              TextSpan(
                  text: 'food',
                  style: naslov(
                      textStyle: TextStyle(color: oranznaDva, fontSize: 20))),
              TextSpan(
                  text: 'Vrhnika',
                  style:
                      naslov(textStyle: TextStyle(color: tekst, fontSize: 25)))
            ])),
        /*leading: IconButton(
          icon: new Icon(Icons.food_bank),
          onPressed: () => Scaffold.of(context).openDrawer(),
        ),*/
      ),
      drawer: SideDrawer(),
      // 改动开始：body部分重构
      body: Container(
        // 强制铺满整个body区域
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [oranzna!, oranznaDva!, rdecaDva!])),
        // 用Column垂直排布内容，第一个子组件就是你要加的带文本的Container
        child: Column(
          children: [
            // 你要新增的带文本的Container，可自定义样式
            Container(
              padding: EdgeInsets.all(16),
              width: double.infinity,
              color: Colors.white.withOpacity(0.8),
              child: Text(
                "这里是你要添加的文本内容",
                style: TextStyle(fontSize: 18, color: Colors.black),
                textAlign: TextAlign.center,
              ),
            ),
            // 后续可以继续加其他页面内容组件
            // 比如如果后续内容要滚动，可把Column整体套在SingleChildScrollView里
          ],
        ),
      ),
    );
  }
}

关键改动说明 #

• 移除了原来包裹渐变Container的Center组件，避免约束渐变Container的尺寸
• 给渐变Container增加width: double.infinity和height: double.infinity属性，强制它铺满整个Scaffold的body区域，保证渐变背景覆盖整个页面
• 渐变Container的child使用Column垂直布局，第一个子元素就是你需要新增的带文本的Container，其他页面内容也可以依次往Column的children里添加
• 如果页面内容超过屏幕高度，只需要把Column套在SingleChildScrollView组件内即可避免布局溢出报错

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