Flutter spaceEvenly/spaceBetween 不工作

Question

我正在嘗試創建一個登錄頁面，我想在第二個文本字段和登錄按鈕之間留出一些空間，嘗試spaceBetween和spaceAround但沒有用

Widget build(BuildContext context) {
return Scaffold(
    body: Center(
  child: Column(mainAxisAlignment: MainAxisAlignment.center,
      children: [
    Container( padding:EdgeInsets.all(10),
      color: Colors.blueGrey,
      child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
        Text("Login",style:TextStyle(fontWeight: FontWeight.bold,fontSize: 20)),
        TextField(
          controller: name_field,
        ),
        TextField(
          controller: password_field,
        ),
        Container(color: Colors.blue,alignment: Alignment.center,padding: EdgeInsets.all(1),
          child: TextButton(
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return SecondScreen(
                      name: name_field.text, pass: password_field.text);
                }));
              },
              child: Text("Login",style:TextStyle(color: Colors.white))),
        ),
      ]),
    ),
  ]),
));

} }

Answer 1

實際上，由於您沒有為容器指定高度，因此容器中沒有足夠的空間在任何小部件之間留出空間。

因此，您應該給該 Container 一些高度，或者在您希望有空間的小部件之間放置一個 SizedBox。 對於這種情況，我會建議第二種選擇。

Scaffold(
    body: Center(
  child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
    Container(
      //height: 300, //Use this (option 1)
      padding: EdgeInsets.all(10),
      color: Colors.blueGrey,
      child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text("Login",
                style:
                    TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
            TextField(
                controller: name_field,
                ),
            TextField(
                controller: password_field,
                ),
                SizedBox(height: 30,),
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              padding: EdgeInsets.all(1),
              child: TextButton(
                  onPressed: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context) {
                      return SecondScreen(
                          name: name_field.text, pass: password_field.text);
                    }));
                  },
                  child:
                      Text("Login", style: TextStyle(color: Colors.white))),
            ),
          ]),
    ),
  ]),
));

Answer 2

mainAxisAlignment將使用主軸調整孩子，但在您的情況下，您使用的是使“Column”最小尺寸的“Center”，這意味着Column內沒有浪費空間。

要解決此問題，您可以像這樣刪除Center或修復Container的高度

示例：刪除Center

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container( // Center and unnecessary column removed, now Container will take full screen as size, child column will have space to align
        padding: const EdgeInsets.all(10),
        color: Colors.blueGrey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            const Text("Login"),
            // const SizedBox(height: 70), // Or add `SizedBox` on each child
            const TextField(),
            const TextField(),
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              padding: const EdgeInsets.all(1),
              child: TextButton(
                onPressed: () {},
                child: const Text("Login"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

間隔只有在有空間分配時才有效。 你在這里做的一些事情是不正確的。

1. 刪除作為 Center 小部件子項的 Column。 它沒有做任何事情。 那應該可以解決您的問題。 然后還有其他事情可以做。

2. 將容器大小中的 Column 設置為最大，這樣它就可以占據整個屏幕而不包裹它的孩子

mainAxisSize: MainAxisSize.max,