Flutter-放置文本框而不使用腳手架

我是 Flutter 的新手，并且來自 android 開發背景，無法正確放置我的小部件。

我打算將一堆文本/按鈕放在另一個之上。下面是我想如何在我的最終螢屏中設定它。此外，我想將整個頁面的背景顏色設定為紅色。

鑒于我不需要標題欄等，我想我會從根本不使用腳手架開始。所以這是我現在的代碼。我首先嘗試正確放置“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后，文本框根本沒有顯示出來，甚至原本是紅色的主背景色也變成了黑色。

所以我有幾個問題。

1. 如何使用我擁有的小部件正確放置我的文本“MYAPP”，以及為什么添加 crossAxisAlignment 作為開始會洗掉整個小部件。
2. 如果我需要添加邊距/填充等，這樣做是否有意義（即在列周圍有一個容器）
3. 當我將根容器的顏色設定為紅色時，即使如此，我的 android 手機的最頂部欄（用于向下滾動任何通知的欄）也不是真正的紅色，而是紅色的偏移量。這是為什么？
4. 如果我為此使用沒有 appbar 的腳手架會更好嗎？
5. 如果我沒有為我的列提供任何軸對齊，為什么文本放在頂部中心，為什么不放在左上角？此外，為什么文本已經從周圍的容器中有一些填充？

uj5u.com熱心網友回復：

請使用此代碼

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: () {},
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

輸出 ：

標籤：扑 颤振布局

上一篇：WatchBoxBuilder已棄用，不應使用

下一篇：撰寫Google表格腳本以生成Google地圖圖片并將其粘貼到單元格中