Flutter页面自定义布局组件摆放及代码复制报错咨询

我正在用Visual Studio Code进行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: 'title', home: const MyHomePage(title: 'a title'),
  );
 }
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(),
  bottomNavigationBar: BottomNavigationBar(),

  body: Container(
    child: Column(       
      children: <Widget>[
        Container(
          const Text('sample text here'),
        ),
        Text(),
        TextFormField(),             
        TextField(),
        const SizedBox(),
        TextField(),             
        //...
        //...
        //... other components
      ],
     ),
  ),
);
} 
}

存在的问题 #

1. 代码识别异常：从其他页面复制的代码无法被Flutter识别，我已了解Container、Column、Row、child/children等布局概念，但不清楚问题根源。
2. 布局需求：当前代码将TextField、Text等组件按单列垂直排列，希望自定义布局（比如实现按钮并排显示）。

当前布局与期望布局对比：

问题解决思路 #

一、修复代码识别问题 #

你的代码存在几个语法/参数缺失问题，这是Flutter无法识别的核心原因：

• Container参数错误：Container的子组件必须通过child:参数传递，需将Container(const Text('sample text here'))改为Container(child: const Text('sample text here'))
• 无参组件错误：Text()、SizedBox()需要传入必要参数（如Text('显示内容')、SizedBox(height: 20)），否则会触发编译报错
• BottomNavigationBar配置缺失：BottomNavigationBar必须设置items属性，示例：items: const [BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页')]

二、实现自定义布局（按钮并排） #

要让组件并排显示，使用Row包裹目标组件即可，示例如下：

// 在Column的children中插入Row实现按钮并排
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 控制按钮间距
  children: [
    ElevatedButton(onPressed: () {}, child: const Text('按钮1')),
    ElevatedButton(onPressed: () {}, child: const Text('按钮2')),
  ],
)

完整修复后的示例代码：

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: 'title',
      home: const MyHomePage(title: 'a title'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      bottomNavigationBar: const BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
        ],
      ),
      body: Container(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: <Widget>[
            Container(child: const Text('sample text here')),
            const Text('这是一段文本'),
            const TextFormField(decoration: InputDecoration(hintText: '输入框1')),
            const TextField(decoration: InputDecoration(hintText: '输入框2')),
            const SizedBox(height: 16),
            const TextField(decoration: InputDecoration(hintText: '输入框3')),
            // 并排按钮示例
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(onPressed: () {}, child: const Text('确认')),
                const SizedBox(width: 16),
                ElevatedButton(onPressed: () {}, child: const Text('取消')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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