在水平 PageView 内颤动垂直滚动

Question

我向 PageView 添加了 2 个表单小部件。每个表单有 6 个 TextFormField。当我点击任一表单中的最后 2 个 TextFormField 时，键盘会显示在字段上并将它们隐藏给用户。

我尝试在 PageView 中使用 SingleChildScrollView，但没有成功。

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(...),
                            ],
                        ),
                    ),
                ],
            ),  
        ),
    );
}

我需要的是在点击 TextFormFields 时自动向上滚动，并且还能够水平滑动 PageView，

Answer 1

试试这个方法。我使用了ListView代替[SingleChildScrollView, Column].

这里是代码。

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SampleScreen(),
    );
  }
}

class SampleScreen extends StatefulWidget {
  @override
  _SampleScreenState createState() => _SampleScreenState();
}

class _SampleScreenState extends State<SampleScreen> {
  List<FocusNode> _focusNodes = List.generate(7, (_) => FocusNode());

  @override
  void dispose() {
    _focusNodes.forEach((_) => _.dispose());
    super.dispose();
  }

  setFocus(BuildContext context, {FocusNode focusNode}) {
    FocusScope.of(context).requestFocus(focusNode ?? FocusNode());
  }

  _sampleForm1() {
    return Form(
      child: ListView(
        padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
        children: <Widget>[
          TextFormField(
            focusNode: _focusNodes[0],
            decoration: InputDecoration(labelText: "Flutter 1"),
            onFieldSubmitted: (_) => setFocus(context, focusNode: _focusNodes[1]),
            textInputAction: TextInputAction.next,
          ),
          TextFormField(
            focusNode: _focusNodes[1],
            decoration: InputDecoration(labelText: "Flutter 2"),
            onFieldSubmitted: (_) => setFocus(context, focusNode: _focusNodes[2]),
            textInputAction: TextInputAction.next,
          ),
          TextFormField(
            focusNode: _focusNodes[2],
            decoration: InputDecoration(labelText: "Flutter 3"),
            onFieldSubmitted: (_) => setFocus(context, focusNode: _focusNodes[3]),
            textInputAction: TextInputAction.next,
          ),
          TextFormField(
            focusNode: _focusNodes[3],
            decoration: InputDecoration(labelText: "Flutter 4"),
            onFieldSubmitted: (_) => setFocus(context, focusNode: _focusNodes[4]),
            textInputAction: TextInputAction.next,
          ),
          TextFormField(
            focusNode: _focusNodes[4],
            decoration: InputDecoration(labelText: "Flutter 5"),
            onFieldSubmitted: (_) => setFocus(context, focusNode: _focusNodes[5]),
            textInputAction: TextInputAction.next,
          ),
          TextFormField(
            focusNode: _focusNodes[5],
            decoration: InputDecoration(labelText: "Flutter 6"),
            onFieldSubmitted: (_) => setFocus(context, focusNode: _focusNodes[6]),
            textInputAction: TextInputAction.next,
          ),
          TextFormField(
            focusNode: _focusNodes[6],
            decoration: InputDecoration(labelText: "Flutter 7"),
            onFieldSubmitted: (_) => setFocus(context),
            textInputAction: TextInputAction.done,
          ),
        ],
      ),
    );
  }

  _sampleForm2() {
    return Form(
      child: ListView(
        padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
        children: <Widget>[
          TextFormField(decoration: InputDecoration(labelText: "Flutter 1")),
          TextFormField(decoration: InputDecoration(labelText: "Flutter 2")),
          TextFormField(decoration: InputDecoration(labelText: "Flutter 3")),
          TextFormField(decoration: InputDecoration(labelText: "Flutter 4")),
          TextFormField(decoration: InputDecoration(labelText: "Flutter 5")),
          TextFormField(decoration: InputDecoration(labelText: "Flutter 6")),
          TextFormField(decoration: InputDecoration(labelText: "Flutter 7")),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: PageView(
        children: <Widget>[
          _sampleForm1(),
          _sampleForm2(),
        ],
      ),
    );
  }
}

希望能帮助到你 ：）