如何降低容器高度 flutter

Question

如何降低綠色容器的高度。 當我更改 flex 值時，當我單擊 email 字段時，它會在綠色容器下拋出底部溢出。 感謝您對此的幫助。 我想要更多的空間來形成部分並降低綠地的高度。 ..................................................... …………

        return GestureDetector(
          onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
          child: Scaffold(
            body: Column(
              children: [
                Expanded(
                  flex: 2,
                  child: Container(
                    color: MainGreen,
                    child: Column(children: [
                       Align(
                         alignment: Alignment.topLeft,
                         child: Padding(
                           padding: const EdgeInsets.only(top: 8),
                           child: Container(
                             child: IconButton(
                                onPressed: () {
                                  Navigator.pop(context);
                                },
                                icon: Icon(
                                  Icons.arrow_left_sharp,
                                  color: backgroundWhite,
                                  size: width * 0.1,
                                ),
                              ),
                           ),
                         ),
                       ),
                      Center(
                        child: ClipRect(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Icon(
                                Icons.crib_rounded,
                                color: textWhite,
                                size: width * 0.18,
                              ),
                            ],
                          ),
                        ),
                      ),
                      SizedBox(
                        height: height * 0.001,
                      ),
                      Center(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Fantom Carpentry",
                              style: TextStyle(
                                  fontSize: width * 0.06,
                                  color: textWhite,
                                  fontWeight: FontWeight.bold,
                                  fontFamily: "Roboto"),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: height * 0.08,
                      ),
                      Center(
                        child: Text(
                          "Login",
                          style: TextStyle(
                              fontSize: 25,
                              color: textWhite,
                              fontWeight: FontWeight.bold,
                              fontFamily: "Roboto"),
                        ),
                      )
                    ]),
                  ),
                ),
                const Expanded(
                    flex: 2,
                    child: Center(
                        child: Padding(
                      padding: EdgeInsets.only(left: 25, right: 25),
                      child: LoginForm(),
                    ))),
              ],
            ),
          ),
        );
      }
    }

Answer 1

您正在溢出，因為屏幕會在鍵盤選項時調整大小。 如果您在鍵盤打開時更改容器的大小，您的 UI 可能看起來不盡如人意，因此我建議將整個小部件包裝在列表視圖中。

Answer 2

嘗試下面的代碼並刪除第一個擴展小部件

Scaffold(
    body: Column(
      children: [
         Container(
            color: Colors.green,
            child: Column(
              children: [
                Align(
                  alignment: Alignment.topLeft,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: Container(
                      child: IconButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        icon: Icon(
                          Icons.arrow_left_sharp,
                          color: Colors.white,
                          size: width * 0.1,
                        ),
                      ),
                    ),
                  ),
                ),
                Center(
                  child: ClipRect(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.crib_rounded,
                          color: Colors.white,
                          size: width * 0.18,
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: height * 0.001,
                ),
                Center(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "Fantom Carpentry",
                        style: TextStyle(
                            fontSize: width * 0.06,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontFamily: "Roboto"),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: height * 0.05,
                ),
                Center(
                  child: Text(
                    "Login",
                    style: TextStyle(
                      fontSize: 25,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontFamily: "Roboto",
                    ),
                  ),
                ), SizedBox(
                  height: height * 0.02,
                ),
              ],
            ),
          ),
       
        Expanded(
          flex: 2,
          child: Center(
            child: Padding(
              padding: EdgeInsets.only(left: 25, right: 25),
              child: Container(),
            ),
          ),
        ),
      ],
    ),
  ),

結果->