容器中的多列

Question

正在学习Flutter，想实现这个样子：

Container是否只允许一个child？我想要多个列，就像图片上一样，我需要 3 个用于徽标、文本框和两个按钮。我该如何正确设置？也许我不应该使用容器？

  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text("test"),
          Text("test")
        ]
      )

另外，这段代码有什么作用？ const MyApp({Key? key}) : super(key: key); 我在任何教程中都没有看到。那是某种构造函数吗？

Answer 1

对于顶部的 logo 部分，您可以简单地使用 Scaffold 的 appBar。

接下来是大框 TextBox，您可以使用 Expanded 和列内的 Align 小部件。

虽然我们使用了 Expanded，但它会占用可用高度。因此接下来的两个按钮将在底部。

我会建议访问并了解有关 widgets 的更多信息，您可以通过多种方式处理此问题 UI。您可以搜索和阅读每个小部件。

class TX extends StatelessWidget {
  const TX({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Text("logo"),
      ),
      body: LayoutBuilder(
        builder: (context, constraints) => Column(
          children: [
            Expanded(
              child: Container(
                color: Colors.cyanAccent,
                child: const Align(
                  alignment: Alignment(0, .5),
                  child: Text("TextBox"),
                ),
              ),
            ),
            SizedBox(
              width: constraints.maxWidth,
              child: ElevatedButton(
                onPressed: () {},
                child: Text("Button"),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            SizedBox(
              width: constraints.maxWidth,
              child: ElevatedButton(
                onPressed: () {},
                child: Text("Buttonx"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

对于关键构造函数，@Midhun MP 已经在评论中进行了描述。它用于标识小部件树。检查这个 video

Answer 2

Does Container only allow one child?

是的，Container() 只能有一个子控件。

小部件就像乐高积木。您必须选择最适合您要求的小部件。对于在单列中显示小部件，您可以使用 Column() 小部件。同样，在行的情况下，您可以使用 Row() 小部件在单行中表示小部件。同样，对于小部件的堆叠，请使用 Stack() 小部件。这个列表就像乐高积木的可用性一样。

现在回到您的实施，您走对了路。您不需要在顶部使用 Container()，只需在 Column 中添加 4 个子部件即可。

Column(
  children: [
    Image(),
    TextField(),
    TextButton(),
    TextButton(),
  ],
)

研究这些小部件的可用自定义选项，您将能够根据您的要求实施此 UI。

P.S。 Flutter 中有许多类型的按钮可用。如果 TextButton() 对您不起作用，您可以选择任何其他按钮。

容器中的多列

Multiple columns in container

flutter

flutter-layout