Flutter

Question

我是 Flutter 的新手，有 android 开发背景，无法正确放置我的小部件。

我打算把一堆 texts/buttons 一个放在另一个上面。下面是我想在最终屏幕中设置它的方式。此外，我想将整个页面的背景颜色设置为红色。

考虑到我不需要标题栏等，我想我应该从根本不使用脚手架开始。所以这是我现在的代码。我首先只是尝试正确放置 'MYAPP' 文本，但没有让它工作。

void main() {
  runApp(const MaterialApp(
    home: MyPage(),
  ));
}

并且在一个单独的文件中，我定义了 MyPage

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

  static const TextStyle myStyle = TextStyle(
  color: AppColors.complementColor,
  fontSize: 80,
  );

  @override
  Widget build(BuildContext context) {
    return Container( // -> using Container, so I can set the background color as Red.
      color: Colors.Red,
      child: Column(
        children: [
          Container( // -> using container again so I can add axis etc, and margins
              child: const Text(
                'MYAPP',
                style: myStyle,
                textDirection: TextDirection.ltr,
              ))
        ],
      ),
    );
  }
}

我的 MYAPP 出现在屏幕的顶部中间。我想要的是它在左侧（并且从一开始就有边距）。

我想添加 mainAxisAlignment: MainAxisAlignment.center 和 crossAxisAlignment: CrossAxisAlignment.start，但是当我添加 crossAxisAlignment 时，文本框根本没有显示，甚至原来是红色的主要背景颜色也变成了黑色.

所以我有几个问题。

如何使用我拥有的小部件正确放置我的文本 'MYAPP'，以及为什么添加 crossAxisAlignment 作为开始会删除整个小部件。
如果我需要添加 margin/padding 等，按我现在的方式做是否有意义（即在列周围有一个容器）
当我将根容器的颜色设置为红色时，即使如此，我的 android phone 最上面的栏（用于向下滚动任何通知的栏）也不是真正的红色颜色，但偏移了红色。这是为什么？
如果我使用不带 appbar 的脚手架会更好吗？
如果我没有为我的专栏提供任何轴对齐方式，为什么文本位于顶部中心而不是左上角？此外，为什么文本已经从周围的容器中填充了一些内容？

Answer 1

请使用此代码

void main() {
  runApp(const MaterialApp(
  debugShowCheckedModeBanner: false,
    home: MyPage(),
  ));
}

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

  static const TextStyle myStyle = TextStyle(
    color: Colors.black,
    fontSize: 80,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.red,
        width: double.infinity,
        height: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Padding(
              padding: EdgeInsets.only(left: 20.0),
              child: Text(
                'MYAPP',
                style: myStyle,
                textDirection: TextDirection.ltr,
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(left: 25),
              child: Text(
                'This is my app',
              ),
            ),
            const SizedBox(
              height: 30,
            ),
            Padding(
              padding: const EdgeInsets.only(left: 25.0, right: 25),
              child: Row(
                children: [
                  Expanded(
                    child: SizedBox(
                      height: 50,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            primary: Colors.transparent,
                            elevation: 0,
                            // side: const BorderSide(width: 2.0, color: Colors.black,),
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(18.0),
                                side: const BorderSide(
                                    color: Colors.black, width: 3))),
                        child: const Text(
                          'This is my button',
                          style: TextStyle(color: Colors.black),
                        ),
                        onPressed: () {},
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

输出：

Flutter - 在不使用脚手架的情况下放置文本框

Flutter - Place Text Box without using Scaffold

flutter-layout