flutter - Flutter中如何使用Column在屏幕中间显示文本？

Question

我对 Flutter 非常陌生。我想在屏幕中间显示两个带有“Column”的文本。

但是当我尝试Center时，它看起来像 this 。它在屏幕顶部显示文本。为什么会出现这种情况？

我的代码:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build (BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: MyHomePage(),
    );
  }
}


class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello world"),
      ),
      body: Center(
        child: Column(
          children: [
            Text(
              "Hello"
            ),
            Text(
              "World"
            )
          ],
        )
        )
      );
  }
}

此外，当我使用 Container 而不是 Column 时，它会显示在屏幕中央，如 this .

问题是什么

我使用的是 Windows 10。谢谢。

Answer 1

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build (BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: MyHomePage(),
    );
  }
}


class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello world"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,//main axis the vertical axis in a column so this positions the children at the center of the vertical axis
          crossAxisAlignment: CrossAxisAlignment.center,//the horizontal axis of a column, again we position the children's at the center of the horizontal axis
          children: [
            Text(
              "Hello"
            ),
            Text(
              "World"
            )
          ],
        )
        )
      );
  }
}

这应该有效 您缺少的是 mainAxisAlignment 和 crossAxisiAlignment 请记住，在 Column() 中，mainAxisAlignment 是垂直轴，而 crossAxisiAlignment 是水平轴，这与 Row() 中相反