Flutter Layout Overflowing with Keyboard 处于活动状态

Question

我正在尝试制作一个看起来像下面这样的登录页面，这很好我已经获得了实现这种外观的代码，但问题是当一个字段处于活动状态并且键盘存在时会显示溢出

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Expanded(
            flex: 1,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                alignment: Alignment.center,
                child: Image.asset(
                  'assets/images/logo.png',
                  alignment: Alignment.center,
                  height: 110,
                  width: 150,
                ),
              ),
            )),
        Expanded(
          flex: 2,
          child: Form(
            key: _formKey,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Column(
                    children: [
                      TextFormField(
                        decoration: const InputDecoration(
                            hintText: 'Email',
                            prefixIcon: Icon(Icons.email_outlined)),
                        onSaved: (input) => _email = input,
                      ),
                      const SizedBox(height: 20),
                      TextFormField(
                        decoration: const InputDecoration(
                            hintText: 'Password',
                            prefixIcon: Icon(Icons.lock_outlined)),
                        onSaved: (input) => _password = input,
                        obscureText: true,
                      ),
                      const SizedBox(height: 20),
                      ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          primary: Colors.lime,
                          minimumSize: const Size.fromHeight(50), // NEW
                        ),
                        onPressed: _submit,
                        child: const Text(
                          'Sign In',
                        ),
                      ),
                    ],
                  ),
                ),
                Column(
                  children: [
                    Text('Sign in with',
                        style: Theme.of(context)
                            .textTheme
                            .bodyMedium
                            .copyWith(fontWeight: FontWeight.bold)),
                    const SizedBox(
                      height: 12,
                    ),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Container(
                              width: 50,
                              height: 50,
                              padding: const EdgeInsets.all(12),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(12),
                                border: Border.all(
                                    width: 2, color: Colors.grey[350]),
                              ),
                              child: Image.asset(
                                  'assets/images/social/google.png',
                                  height: 25)),
                          Container(
                              width: 50,
                              height: 50,
                              padding: const EdgeInsets.all(12),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(12),
                                border: Border.all(
                                    width: 2, color: Colors.grey[350]),
                              ),
                              child: Image.asset(
                                  'assets/images/social/facebook.png',
                                  height: 25)),
                          Container(
                              width: 50,
                              height: 50,
                              padding: const EdgeInsets.all(12),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(12),
                                border: Border.all(
                                    width: 2, color: Colors.grey[350]),
                              ),
                              child: Image.asset(
                                  'assets/images/social/apple.png',
                                  height: 25)),
                        ]),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text('Create a New Account?'),
                    TextButton(
                      onPressed: () => Navigator.push(
                        context,
                        MaterialPageRoute(builder: (_) => const SignupScreen()),
                      ),
                      child: const Text(
                        'Go to Sign Up',
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ]),
    );
  }
}

Answer 1

用 singlechildscrollview 包裹你的专栏

 body:singleChildScrollview(Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Expanded(
                flex: 1,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    alignment: Alignment.center,
                    child: Image.asset(
                      'assets/images/logo.png',
                      alignment: Alignment.center,
                      height: 110,
                      width: 150,
                    ),
                  ),
                )),
            Expanded(
              flex: 2,
              child: Form(
                key: _formKey,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Column(
                        children: [
                          TextFormField(
                            decoration: const InputDecoration(
                                hintText: 'Email',
                                prefixIcon: Icon(Icons.email_outlined)),
                            onSaved: (input) => _email = input,
                          ),
                          const SizedBox(height: 20),
                          TextFormField(
                            decoration: const InputDecoration(
                                hintText: 'Password',
                                prefixIcon: Icon(Icons.lock_outlined)),
                            onSaved: (input) => _password = input,
                            obscureText: true,
                          ),
                          const SizedBox(height: 20),
                          ElevatedButton(
                            style: ElevatedButton.styleFrom(
                              primary: Colors.lime,
                              minimumSize: const Size.fromHeight(50), // NEW
                            ),
                            onPressed: _submit,
                            child: const Text(
                              'Sign In',
                            ),
                          ),
                        ],
                      ),
                    ),
                    Column(
                      children: [
                        Text('Sign in with',
                            style: Theme.of(context)
                                .textTheme
                                .bodyMedium
                                .copyWith(fontWeight: FontWeight.bold)),
                        const SizedBox(
                          height: 12,
                        ),
                        Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              Container(
                                  width: 50,
                                  height: 50,
                                  padding: const EdgeInsets.all(12),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(12),
                                    border: Border.all(
                                        width: 2, color: Colors.grey[350]),
                                  ),
                                  child: Image.asset(
                                      'assets/images/social/google.png',
                                      height: 25)),
                              Container(
                                  width: 50,
                                  height: 50,
                                  padding: const EdgeInsets.all(12),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(12),
                                    border: Border.all(
                                        width: 2, color: Colors.grey[350]),
                                  ),
                                  child: Image.asset(
                                      'assets/images/social/facebook.png',
                                      height: 25)),
                              Container(
                                  width: 50,
                                  height: 50,
                                  padding: const EdgeInsets.all(12),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(12),
                                    border: Border.all(
                                        width: 2, color: Colors.grey[350]),
                                  ),
                                  child: Image.asset(
                                      'assets/images/social/apple.png',
                                      height: 25)),
                            ]),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text('Create a New Account?'),
                        TextButton(
                          onPressed: () => Navigator.push(
                            context,
                            MaterialPageRoute(builder: (_) => const SignupScreen()),
                          ),
                          child: const Text(
                            'Go to Sign Up',
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ]),)

Answer 2

尝试在里面添加您的第 2 列SingleChildScrollView希望对您有所帮助。

Expanded(
      flex: 2,
      child: Form(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [ 
              //put your widget here
             ],
           ),
        ),
    ),
 ),

Answer 3

尝试以这种方式使用填充。希望这有帮助

Padding(
  padding: MediaQuery.of(context).viewInsets,
  child: Column(
    children: <Widget>[
        // your entire form widgets here
    ]
  )
)

Flutter Layout Overflowing with Keyboard 处于活动状态

Flutter Layout Overflowing with Keyboard is active

flutter

flutter-layout