在Flutter中结合SingleChildScrollView和PageView [英] Combine SingleChildScrollView and PageView in Flutter

问题描述

我创建了两个表单，并将它们添加到PageView中.每个表单都有6个TextFormField.当我点击最后2个TextFormField时，键盘将显示在这些字段上方并隐藏它们.我需要的是向上滚动表格以显示这些字段，当我点击每个字段并且键盘可见时. 对于这种方法，我尝试像示例中一样在PageView下使用SingleChildScrollView，但是它不能满足我的需要. 我该如何解决?

I created two forms, and added them to a PageView. Each form has 6 TextFormField. When I tap on the last 2 TextFormField, the keyboard shows up over these fields and hides them. What I need is to scroll up the form to show these fields when I tap each one and the keyboard is visible. For this approach I tried using a SingleChildScrollView under PageView like in the example, but it doesn't do what I need. How can I fix this?

Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomPadding: false,
        body: PageView(
            children: <Widget>[
            _sampleForm(),
            _sampleForm(),  
            ],
        ),
    )
}

_sampleForm(){
    return Container(
        margin: const EdgeInsets.fromLTRB(0, 0, 0, 10),
        width: MediaQuery.of(context).size.width,
        child: SingleChildScrollView(
            child: Column(
                children: <Widget>[
                    Form(
                        child: Column(
                            children: <Widget>[
                                TextFormField(...),
                                TextFormField(...),
                                TextFormField(...),
                                TextFormField(...),
                                TextFormField(...),
                                TextFormField(...),
                            ],
                        ),
                    ),
                ],
            ),  
        ),
    );
}

推荐答案

我已经对此进行了测试.

I have tested this to work.

class SO extends StatefulWidget {
  @override
  _SOState createState() => _SOState();
}

class _SOState extends State<SO> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(""),
      ),
      body: PageView(
        children: <Widget>[
          _sampleForm("Page 1"),
          _sampleForm("Page 2"),
        ],
      ),
    );
  }

  _sampleForm(String title) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Column(
          children: <Widget>[
            Form(
              child: Column(
                children: <Widget>[
                  ListTile(title: Text(title, textAlign: TextAlign.center)),
                  for (int i = 0; i < 10; i++) TextFormField(decoration: InputDecoration(hintText: "field ${i+1}"),),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

只需一些额外的填充来显示内容就是您所需要的.

---

Just some extra padding to show the content is what you need.

这篇关于在Flutter中结合SingleChildScrollView和PageView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！