美文网首页
Flutter 键盘遮挡住了控件

Flutter 键盘遮挡住了控件

作者: Lost_Robot | 来源:发表于2020-08-20 15:46 被阅读0次

Flutter中使用TextField输入框,会有键盘遮挡问题:

      TextField(
              decoration: InputDecoration(
//                  labelText: "密码",
                  hintText: "您的登录密码",
                  prefixIcon: Icon(Icons.lock)),
              obscureText: true,
            ),
            SizedBox(
              height: 40,
            ),
遮挡键盘的图片

解决方案:

在页面的Scaffold里面添加属性:

resizeToAvoidBottomInset: false,

修改后的结果:


修改后就不在遮挡控件

源码:

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

class LoginPage extends StatefulWidget {
  String title = "Login";

  LoginPage({Key key, this.title}) : super(key: key);

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

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              height: 120,
            ),
            Text(
              'TEST APP',
              textAlign: TextAlign.start,
              style: TextStyle(
                  color: Color.fromARGB(255, 33, 33, 33),
                  fontSize: 28.0,
                  fontWeight: FontWeight.w900,
                  //出体
                  height: 1.2,
                  fontFamily: "Courier",
                  //  background: new Paint()..color = Colors.yellow,
//                  decoration: TextDecoration.underline,
                  decorationStyle: TextDecorationStyle.dashed),
            ),
            SizedBox(
              height: 80,
            ),
            TextField(
              autofocus: true,
              decoration: InputDecoration(
//                  labelText: "用户名",
                  hintText: "用户名或邮箱",
                  prefixIcon: Icon(Icons.person)),
            ),
            SizedBox(
              height: 40,
            ),
            TextField(
              decoration: InputDecoration(
//                  labelText: "密码",
                  hintText: "您的登录密码",
                  prefixIcon: Icon(Icons.lock)),
              obscureText: true,
            ),
            SizedBox(
              height: 40,
            ),
            RaisedButton(
              child: Text("登 陆"),
              textColor: Color.fromARGB(108, 203, 71, 65),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

相关文章

网友评论

      本文标题:Flutter 键盘遮挡住了控件

      本文链接:https://www.haomeiwen.com/subject/nuzsjktx.html