使用自定义布局将组件放置在 flutter 页面屏幕中

Question

我正在使用 Visual Studio 代码进行 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
      ],
     ),
  ),
);
} 
}

当我编写用于添加组件（文本字段框、文本、提升按钮等）的代码时，如代码所示，它会在同一列的一行中显示每个组件。但我想按照我的意愿放置组件。例如，并排的按钮。

我还添加了一个我有的插图（糟糕的布局）和我想要做的（绿色布局）。

（PS：我知道所有内容都是关于容器、列、行、子项、子项……概念，但我不知道为什么当我有时从 a 复制整个代码时，复制的代码不被 flutter 接受工作页面。）

Answer 1

如果您了解这些概念，那么垂直放置元素的第一步就是使用您已经拥有的列。其次，以您的小部件 text1、textFormField 和 text 2 为例，它们在列内水平对齐，这意味着它们应该位于一行内。

类似这样的：

Scaffold(
  appBar: AppBar(),
  bottomNavigationBar: BottomNavigationBar(),

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