Перемещение вертикальной прокрутки внутри горизонтального просмотра страницы

Я добавил 2 виджета формы в PageView. Каждая форма имеет 6 TextFormField. Когда я нажимаю на последние 2 поля TextFormField из любой формы, клавиатура появляется над полями и скрывает их для пользователя.

Я попытался использовать SingleChildScrollView внутри PageView, но безуспешно.

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 по горизонтали,


flutter pageviews
person sfirc    schedule 13.09.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

попробуйте этот подход. Я использовал 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(),
        ],
      ),
    );
  }
}

Надеюсь, это поможет :)

person Ajay Kumar    schedule 13.09.2019