Flutter中如何为Container添加标题？并在登录表单上方添加标题或图片

嘿，这两个需求都很容易实现，我一步步给你讲清楚：

1. 在注册/登录表单上方添加应用说明图片 #

你只需要在现有Column的children列表最前面插入一个Image组件就行，根据图片来源选对应的构造方法：

• 本地资源图片用Image.asset('assets/your_app_image.png')（记得先在pubspec.yaml里配置资源路径）
• 网络图片用Image.network('你的图片地址')

还可以给图片设置合适的宽高，再用SizedBox和表单拉开距离，让布局更美观。

2. 给Flutter的Container添加标题 #

Flutter的Container本身没有自带的title属性，但我们可以调整它的子组件结构来实现。把原来的表单Column放到一个更大的Column里，顶部加上标题文本即可，还能给标题加样式（比如加粗、调字体大小）和内边距，让它更像标准标题。

下面是修改后的完整代码，我标注了所有新增的内容：

@override
Widget build(BuildContext context) {
  SizeConfig().init(context);
  return Scaffold(
    appBar: AppBar(
      title: _title(),
    ),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      padding: const EdgeInsets.all(10),
      // 替换原有的表单Column为包含标题、图片和表单的大Column
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // --- 新增：Container的标题 ---
          const Text(
            '欢迎使用我的应用',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 20), // 标题与图片的间距
          // --- 新增：应用说明图片 ---
          Image.network(
            '你的应用说明图片地址', // 替换成实际图片链接或本地资源路径
            width: 150,
            height: 150,
          ),
          const SizedBox(height: 30), // 图片与表单的间距
          // --- 原有的表单内容 ---
          _entryField('email', _controllerEmail),
          const Padding(padding: EdgeInsets.only(bottom: 10)),
          _entryField('password', _controllerPassword),
          const Padding(padding: EdgeInsets.only(bottom: 10)),
          _submitButton(),
          _loginOrRegisterButton(),
        ],
      ),
    ),
  );
}

如果用本地图片，记得在pubspec.yaml里配置资源：

flutter:
  assets:
    - assets/your_app_image.png

这样修改后，页面就会依次显示容器标题、应用说明图，最后是登录注册表单啦。

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