Flutter新手求助：Navbar下方添加元素不显示如何解决？

我是Flutter新手，已完成一个Navbar的开发，以下是我的代码及效果截图。我想要在Navbar下方添加文本、图片等各类元素，但尝试添加后内容无法显示，请问该如何解决这个问题？

import 'dart:html';

import 'package:flutter/material.dart';
import 'package:color/color.dart';


class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            width: double.infinity,
          
         color: Colors.grey[900],         
         child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              //height: 150,
             // width: 150,
              child: Image.asset('assets/images/logo.png'),
            ),
             Spacer(),
         Text("Escorts",
         style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
         SizedBox(width: 32,),
         Text("Angenturen & Clubs",
         style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
         SizedBox(width: 32,),
         Text("Inserieren",
         style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
         SizedBox(width: 32,),
         Text("Werben",
         style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
         SizedBox(width: 32,),
         Text("Blog",
         style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
         SizedBox(width: 32,),
         Text("Kontakt",
         style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
         Spacer(),
         Icon(Icons.attach_money, color: Colors.white,),
         SizedBox(width: 20,),
         Icon(Icons.chat, color: Colors.white,),
         SizedBox(width: 20,),
         Icon(Icons.person, color: Colors.white,),
         SizedBox(width: 20,),
         Icon(Icons.search, color: Colors.white,),
         SizedBox(width: 32,),
         
          ],
         ),
        ),
         
        ],
        
      ),
    );
  }
}

问题核心在于你用了Stack布局且Navbar的Container未设置高度：Stack是层叠布局，子组件默认会占满父容器空间，你的Navbar容器没有高度限制，会直接撑满整个Scaffold的body区域，导致后续添加的内容要么被Navbar完全覆盖，要么没有可显示的空间。

方案一：用Column替代Stack（推荐） #

页面内容垂直排列的场景更适合用Column，把Navbar作为Column的第一个子项，后续内容放在后面即可：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // Navbar部分，设置固定高度
          Container(
            width: double.infinity,
            height: 80, // 给Navbar设置合适的固定高度
            color: Colors.grey[900],         
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: const <Widget>[
                SizedBox(
                  child: Image.asset('assets/images/logo.png'),
                ),
                Spacer(),
                Text("Escorts", style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
                SizedBox(width: 32,),
                Text("Angenturen & Clubs", style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
                SizedBox(width: 32,),
                Text("Inserieren", style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
                SizedBox(width: 32,),
                Text("Werben", style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
                SizedBox(width: 32,),
                Text("Blog", style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
                SizedBox(width: 32,),
                Text("Kontakt", style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
                Spacer(),
                Icon(Icons.attach_money, color: Colors.white,),
                SizedBox(width: 20,),
                Icon(Icons.chat, color: Colors.white,),
                SizedBox(width: 20,),
                Icon(Icons.person, color: Colors.white,),
                SizedBox(width: 20,),
                Icon(Icons.search, color: Colors.white,),
                SizedBox(width: 32,),
              ],
            ),
          ),
          // 这里添加你需要的内容，比如文本、图片
          const Expanded(
            child: Center(
              child: Text(
                "Navbar下方的内容",
                style: TextStyle(color: Colors.black, fontSize: 24),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

方案二：保留Stack但调整布局 #

如果一定要用Stack，需要给Navbar设置固定高度，然后用Positioned把下方内容定位到Navbar的下方：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final double navbarHeight = 80;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Navbar部分
          Container(
            width: double.infinity,
            height: navbarHeight, // 设置固定高度
            color: Colors.grey[900],         
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: const <Widget>[
                SizedBox(
                  child: Image.asset('assets/images/logo.png'),
                ),
                Spacer(),
                Text("Escorts", style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
                SizedBox(width: 32,),
                Text("Angenturen & Clubs", style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
                SizedBox(width: 32,),
                Text("Inserieren", style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
                SizedBox(width: 32,),
                Text("Werben", style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
                SizedBox(width: 32,),
                Text("Blog", style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
                SizedBox(width: 32,),
                Text("Kontakt", style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),),
                Spacer(),
                Icon(Icons.attach_money, color: Colors.white,),
                SizedBox(width: 20,),
                Icon(Icons.chat, color: Colors.white,),
                SizedBox(width: 20,),
                Icon(Icons.person, color: Colors.white,),
                SizedBox(width: 20,),
                Icon(Icons.search, color: Colors.white,),
                SizedBox(width: 32,),
              ],
            ),
          ),
          // 下方内容，定位在Navbar下方
          Positioned(
            top: navbarHeight,
            left: 0,
            right: 0,
            bottom: 0,
            child: const Center(
              child: Text(
                "Navbar下方的内容",
                style: TextStyle(color: Colors.black, fontSize: 24),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

额外提示 #

你的代码里导入了dart:html（Web专用）和package:color/color.dart（未使用），如果是开发移动应用，建议移除这些无用导入，避免编译错误。

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