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

b4lqfgs4 于 2023-10-22 发布在 Flutter

关注(0)|答案(4)|浏览(163)

我在Flutter中设计了一个表单。我想让它滚动每当键盘打开，使用户可以填写得到键盘下面隐藏的领域。下面是相同的截图：

我用SingleChildScrollView()试过了，但是没有用。我试过在SingleChildScrollView()中 Package 各种小部件，但它不工作。我也尝试过将其 Package 在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: () {
            }
          },
        ),
      ]),
    );

flutter

来源：https://stackoverflow.com/questions/71971176/how-to-make-my-form-scrollable-on-keyboard-input

4条答案

按热度按时间

nvbavucw1#

尝试用填充物包裹它

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

赞(0）回复(0）举报 2023-10-22

esyap4oy2#

SingleChildScrollView小部件应该可以解决您的问题。它可能是你放置它的地方。它需要 Package 整个表单，而不仅仅是一个单独的列表瓦片。下面是一个例子，以你的例子为基础。

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',
            ),
          ),
        ),
      ]),
    ),
  ),
);

}

赞(0）回复(0）举报 2023-10-22

fbcarpbf3#

我以前遇到过这个问题，我设法通过用SingleChildScrollView Package 包含小部件的列并给它Axis.vertical来缓解它。然后转到父scaffold并将resizeToAvoidBottomInset设置为true。
Depends on how your widget tree looks

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

赞(0）回复(0）举报 2023-10-22

e37o9pze4#

如果你正在使用Screenutil包，你可以实现这个
ScreenUtilInit（useInheritedMediaQuery：true，）

赞(0）回复(0）举报 2023-10-22