flutter - 文本字段打开键盘颤振脚手架
问题描述
正如您从我发布的视频中看到的那样,我对下面的文本字段有一个约束问题。一旦我按下,键盘就会打开,但它会重叠并破坏整个视图。我该如何解决和管理问题?
问题可能在于 qrima 的尺寸设置不当。
他们建议我管理 Scaffold 中的所有内容,然后设置 resizeToAvoidBottomInset: false 但我没有注意到任何改进
我已经问过这个问题,他们告诉我把所有东西都放在脚手架里。我试过了,但这真的破坏了视野,我什么也没看到
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
_buttonHeight = size.height * .05;
double splitPoint = size.height / 7;
return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: [FutureBuilder<UserData>(
future: contentManager.getUserData(),
builder: (context, AsyncSnapshot<UserData> snapUserData) {
if (snapUserData.hasError)
return Container(
child: Center(
child: Text("There was some error"),
),
);
if (snapUserData.connectionState != ConnectionState.done)
return Container(
child: Center(
child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(appColors.yellow)),
),
);
return Stack(
alignment: AlignmentDirectional.center,
children: [
// SFONDO
Positioned(
bottom: 0,
child: Container(
height: size.height,
width: size.width,
color: appColors.primaryColor,
),
),
// TITOLO
Positioned(
top: size.height * .05,
child: Text(
localization.showQR,
style: Theme.of(context).primaryTextTheme.headline5.copyWith(
color: appColors.green,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
top: size.height * .10,
width: size.width * .8,
child: qrCodeHolder,
),
Positioned(
bottom: size.height * .18,
width: size.width * .8,
child: AutoSizeText(
localization.home_subLabel,
textAlign: TextAlign.center,
maxLines: 1,
style: Theme.of(context).primaryTextTheme.headline5.copyWith(
color: appColors.green,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
bottom: size.height * .08,
width: size.width * .7,
height: size.height * .05,
child: TextField(
inputFormatters: [
new LengthLimitingTextInputFormatter(11),
],
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18.0,
//height: 2.0,
color: Colors.black,
),
),
),
],
);
}),
]),
);
}
}
解决方案
我不得不说你正在使用堆栈并且定位太多。没有必要计算一切。而是使用像 Expanded 或 padding 这样的颤振小部件来在小部件之间和周围留出所需的空间。我无法轻松修复您的代码,但我至少尝试以类似的方式编写它。此代码将防止输入覆盖。请检查:
import 'package:flutter/material.dart';
class TestPage extends StatefulWidget {
@override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
final Future<String> getUserData = Future<String>.delayed(
const Duration(seconds: 2),
() => 'Data Loaded',
);
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(28.0),
child: Column(
children: [
Expanded(
child: FutureBuilder<String>(
future: getUserData,
builder: (context, AsyncSnapshot<String> snapUserData) {
if (snapUserData.hasError)
return Container(
child: Center(
child: Text("There was some error"),
),
);
if (snapUserData.connectionState != ConnectionState.done)
return Container(
child: Center(
child: CircularProgressIndicator(
valueColor: new AlwaysStoppedAnimation<Color>(
Colors.yellow)),
),
);
return Column(
children: [
// TITOLO
Text(
"qr",
style: Theme.of(context)
.primaryTextTheme
.headline5
.copyWith(
color: Colors.green,
fontWeight: FontWeight.bold,
),
),
Expanded(
child: Center(
child: Text(
"something",
))),
Container(
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(1.0),
child: TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18.0,
//height: 2.0,
color: Colors.black,
),
),
),
),
],
);
}),
),
],
),
),
),
);
}
}
推荐阅读
- java - 在方法名称中发现无效字符。HTTP 方法名称必须是标记
- javascript - 如何在输入标签中使用 javascript 显示实时输入?
- php - PHP-FPM子进程同步/异步?
- r - R中的三重循环
- dns - 我可以告诉 certbot 使用特定的 DNS 服务器吗?
- powershell - Powershell - 使用 INVOKE-RESTMETHOD 通过多层 JSON 输出进行枚举
- swift - 无法分配“数据”类型的值?键入“数据?”
- android - 使用 JobIntentService 在 Oreo 上不刷新主页小部件
- tensorflow - PAI 教程示例无法运行。使用“[退出代码]:177”
- qt - 从 Pyqt5 中的可检查组合框中获取已检查的文本