强制柔性容器填充所有空间

问题描述 投票:0回答:1

当键盘打开时,如何强制我的小部件 (2) 填充整个屏幕空间并几乎隐藏我的小部件 (1)?所需结果的示例位于所需行为图片下,我通过将小部件 (2) flex 参数更改为 9 来实现此目的,但我希望这种情况自动发生...

class RegistrationForm extends StatelessWidget {
  const RegistrationForm({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: Container(
        color: Colors.green,
        child: Form(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Flexible(
                flex: 1,
                child: Container(
                  padding: const EdgeInsets.only(
                    top: 60,
                    left: 30,
                    right: 30,
                    bottom: 5,
                  ),
                  height: 240,
                  child: const Text(
                    "Welcome, please fill your data",
                    style: TextStyle(fontSize: 35),
                  ),
                ),
              ),
              Flexible(
                flex: 3,
                child: SingleChildScrollView(
                  child: Container(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 35.0,
                      vertical: 50,
                    ),
                    decoration: const BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(40),
                          topRight: Radius.circular(40),
                        )),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        const Padding(
                          padding: EdgeInsets.symmetric(vertical: 20),
                          child: TextField(
                            decoration: InputDecoration(labelText: "Name"),
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.symmetric(vertical: 20),
                          child: TextField(
                            decoration: InputDecoration(labelText: "Email"),
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.symmetric(vertical: 20),
                          child: TextField(
                            decoration: InputDecoration(labelText: "Password"),
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.symmetric(vertical: 20),
                          child: TextField(
                            decoration:
                                InputDecoration(labelText: "Repeat password"),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(vertical: 40),
                          child: ElevatedButton(
                            child: Text(
                              "Register",
                              style: TextStyle(color: Colors.green),
                            ),
                            onPressed: () => print("register"),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

无键盘时的默认行为:

当前行为:

期望的行为

flutter dart responsive-design
1个回答
0
投票

您可以检测键盘是打开还是关闭。然后,如果键盘打开,您可以增加小部件2的高度并隐藏小部件1

要检测键盘可见性,可以使用此依赖项:flutter_keyboard_visibility

© www.soinside.com 2019 - 2024. All rights reserved.