Текстовое поле "Flutter/Dart Scrolling" над клавиатурой

Question

Я использую текстовые поля, как я могу сделать так, чтобы он немного прокручивался при вводе электронной почты и пароля?

Вот предварительный просмотр кода

https://pastebin.com/4EngQDV5

blank

Answer 1

В моем случае есть решение, которое дало ожидаемые результаты. TextField имеет свойство, вызывающее scrollPadding . scrollPadding: EdgeInsets.only(bottom:40), По умолчанию установлено значение EdgeInsets.all(20.0)

Вы можете указать фиксированное значение или использовать viewInsets. Надеюсь, это тебе тоже поможет. Дополнительную информацию можно найти здесь .

Answer 2

Я нашел хорошее решение.
я добавил в в собственность следующим образом

      child: TextFormField(
        scrollPadding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom + fontSize*4),
        validator: _validator,
        cursorColor: cTextRegularColor,
        controller: _controller,
        obscureText: _obscure,
        obscuringCharacter: '*',
        textAlign: _textAlign,
        keyboardType: _input,
        style: const TextStyle(
          color: cTextRegularColor,
          fontSize: fontSize,
        ),

Установив bottomInset, в моих формах всякий раз, когда пользователь нажимает на TextField в форме, он не только прокручивается вниз, но также показывает следующее TextField в форме, поэтому пользователю не нужно прокручивать после того, как он закончил заполнение текущего поля.

Очевидно, что когда пользователь коснется следующего поля в форме, экран снова прокрутится и снова покажет следующее поле,

Я разобрался, что в длинных формах (более 5 полей) пользователю вообще не нужно прокручивать.

Answer 3

Хорошо, во-первых, код, который вы вставили, является неполным, поэтому я предполагаю, что у вас есть эти текстовые поля внутри столбца. У вас есть два варианта:

1. В вашем Scaffold вы можете установить для этого свойства значение false, например resizeToAvoidBottomPadding: false,
2o) Вы можете использовать SingleChildScrollView, который будет перемещаться вверх по текстовому полю, когда появляется клавиатура, например:

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SingleChildScrollView(
          child: MyLoginPage(title: 'Flutter Demo Home Page'),
        ),
      ),
    );
  }
}

class MyLoginPage extends StatefulWidget {
  MyLoginPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyLoginPageState createState() => _MyLoginPageState();
}

class _MyLoginPageState extends State<MyLoginPage> {
  String _email;
  String _password;
  TextStyle style = TextStyle(fontSize: 25.0);

  @override
  Widget build(BuildContext context) {
    final emailField = TextField(
      obscureText: false,
      style: style,
      decoration: InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
          prefixIcon: Icon(FontAwesomeIcons.solidEnvelope),
          hintText: "Email",
          focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red[300], width: 32.0),
              borderRadius: BorderRadius.circular(97.0))),
      onChanged: (value) {
        setState(() {
          _email = value;
        });
      },
    );
    final passwordField = TextField(
      obscureText: true,
      style: style,
      decoration: InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
          prefixIcon: Icon(FontAwesomeIcons.key),
          hintText: "Password",
          focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red[300], width: 32.0),
              borderRadius: BorderRadius.circular(25.0))),
      onChanged: (value) {
        setState(() {
          _password = value;
        });
      },
    );

    return Center(
      child: Column(
        children: <Widget>[
          Container(
            color: Colors.yellow[300],
            height: 300.0,
          ),
          emailField,
          passwordField
        ],
      ),
    );
  }
}

Просто скопируйте и вставьте код и посмотрите, хотите ли вы.
Надеюсь, это поможет.

Answer 4

Я использую flutter 2.2.0, и когда я добавляю SingleChildScrollView, он автоматически прокручивается, если клавиатура отображается и перекрывает текстовое поле. resizeToAvoidBottomInset по умолчанию true разрешает эту функцию (проверено на iOS). если вы хотите, чтобы в текстовом поле было больше места с клавиатурой, попробуйте ответ Варсика Никояна

/questions/49039038/tekstovoe-pole-flutterdart-scrolling-nad-klaviaturoj/57229064#57229064

надеюсь может помочь.

Answer 5

У меня на самом деле была такая же проблема. Понял, что вам нужно обернуть TextForms в ListView, чтобы он работал.

import 'package:flutter/material.dart';

class ScrollView extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _ScrollViewState();
}
}

class _ScrollViewState extends State<ScrollView>{
@override
Widget build(BuildContext context) {
return Scaffold(
    backgroundColor: userInputBackgroundColor,
    body: ListView(
              padding: EdgeInsets.all(0.0),
              shrinkWrap: true,
              children: <Widget>[
               TextForm(),
               TextForm()
              ]
          ),
        )
    }
}

Answer 6

Это новый код. Я думаю, что этот поможет вам. Добавьте этот код после объявления passwordField.

 return Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        emailField,
        SizedBox(
          height: 10,
        ),
        passwordField,
      ],
    ),
  ),
);