Flutter语言 - 我如何创建此注册表单?

Question

我试图在我的文本下面放置一个输入表单字段，上面说请输入您的电子邮件。有人能帮忙吗?我现在最大的问题是我不知道如何在文本下方添加其他内容。理想情况下，我想要一个中心输入字段。代码如下:

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:google_fonts/google_fonts.dart';
void main() {
  runApp(MyApp());
}
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}
class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(children: <Widget>[
        TextFormField(
          decoration: InputDecoration(labelText: 'Enter your email'),
        ),
      ]),
    );
  }
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Test Bench',
        home: Stack(children: [
          new Scaffold(
            body: new Container(
              decoration: BoxDecoration(color: Colors.pinkAccent),
              child: Padding(
                padding: const EdgeInsets.all(30.0),
                child: Text(
                  "Hello, Let's Get Started...",
                  style: TextStyle(
                      fontSize: 60.0,
                      fontWeight: FontWeight.bold,
                      fontFamily: 'Oswald',
                      color: Colors.black),
                ),
              ),
            ),
          ),
        ]));
  }
}

Answer 1

您可以用Column来包装文本，以便在彼此的下方附加小部件(视频)。你可以在这里查看更多信息。这个视频也有助于一般的布局(链接)。

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
  runApp(MyApp());
}
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}
class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(children: <Widget>[
        TextFormField(
          decoration: InputDecoration(labelText: 'Enter your email'),
        ),
      ]),
    );
  }
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Bench',
      home: Stack(
        children: [
          Scaffold(
            body: Container(
              width: double.infinity,
              decoration: BoxDecoration(color: Colors.pinkAccent),
              child: Padding(
                padding: const EdgeInsets.all(30.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      "Hello, Let's Get Started...",
                      style: TextStyle(
                        fontSize: 60.0,
                        fontWeight: FontWeight.bold,
                        fontFamily: 'Oswald',
                        color: Colors.black,
                      ),
                    ),
                    MyCustomForm(),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

您可能很难找到如何添加多个小部件作为Scaffold的子组件。

我建议你去看看关于布局的官方文档

您将在那里学习如何创建更复杂的布局以及如何在文本小部件下添加输入文本字段。