如何使我的表单在键盘输入时可滚动

Question

我在Flutter中设计了一个表单。我想在键盘打开时使其可滚动，以便用户可以填写隐藏在键盘下方的字段。这是相同的屏幕截图：

我已经使用

SingleChildScrollView()

尝试过此操作，但是，它不起作用。我尝试将各种小部件包装在

SingleChildScrollView()

内，但它不起作用。我也尝试过将其包装在

Expanded()

小部件中，但仍然无法实现我的目标。

这是我的代码：

Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(10),
      child: Column(children: <Widget>[
        Form(
            key: formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                ListTile(
                  title: const Text("Name"),
                  subtitle: TextFormField(
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.all(Radius.circular(8))),
                      contentPadding: EdgeInsets.symmetric(horizontal: 10),
                      hintText: 'Type your name here',
                    ),
                  ),
                ),
        
            ElevatedButton(
              style: style,
              child: Container(
              width: MediaQuery.of(context).size.width,
              alignment: Alignment.center,
              child: const Text(
               'Update',
               style: TextStyle(
                  fontSize: 24, color: Colors.white, fontFamily: 'Nunito'),
            ),
          ),
             onPressed: () {
            }
          },
        ),
      ]),
    );

Answer 1

尝试用填充物包裹它

padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),

Answer 2

SingleChildScrollView 小部件应该可以解决您的问题。它可能是您放置它的位置。它需要包装整个表单，而不仅仅是单个列表图块。以下是使用您的示例作为基础的示例。

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: SingleChildScrollView(
    child: Container(
      margin: const EdgeInsets.all(10),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        ListTile(
          title: const Text("1"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
        ListTile(
          title: const Text("2"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
        ListTile(
          title: const Text("3"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
        ListTile(
          title: const Text("4"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
        ListTile(
          title: const Text("5"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
      ]),
    ),
  ),
);

}

Answer 3

我之前遇到过这个问题，我设法通过用

SingleChildScrollView

包装包含小部件的列并给它

Axis.vertical

来缓解这个问题。然后转到父脚手架并将

resizeToAvoidBottomInset

设置为

true

。

Depends on how your widget tree looks

Scaffold(
    resizeToAvoidBottomInset: true,
    ///
    body: SingleChildScrollView(
     scrollDirection: Axis.vertical,
     child: Column(  /// Your widget
        children: []
      ),
     ),
    );

Answer 4

如果您使用 Screenutil 包，您可以实现这个

ScreenUtilInit(useInheritedMediaQuery: true, )