键盘上方的Flutter / Dart滚动文本字段 [英] Flutter/Dart Scrolling textfield above keyboard

问题描述

我正在使用文本字段，如何使其在输入电子邮件和密码时会向上滚动？

I am using textfields, how can I make it so it scrolls up a bit when entering email and password?

以下是代码的预览

https://pastebin.com/4EngQDV5

blank

推荐答案

好吧，您粘贴的代码不完整，所以我猜您是在Column中包含了这些文本字段。您有两个选择：


1st）在脚手架中，您可以将此属性设置为false，例如 resizeToAvoidBottomInset：false，

2o ）您可以使用 SingleChildScrollView ，当出现键盘时，该文本将在文本字段中上移，例如：

Ok first, the code you pasted is incomplete, so I'm guessing you are having those textfields insides a Column. You have two options:

1st) In your Scaffold you can set this property to false like resizeToAvoidBottomInset: false,
2o) You can use a SingleChildScrollView that will move up your textfield when the keyboard appears eg.:

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

只需复制并粘贴代码，看看是否您想要什么。

希望获得帮助。

Just copy and paste the code, and see if it's what you want.
Hope this help.

这篇关于键盘上方的Flutter / Dart滚动文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！