[英]TextFormField hide behind keyboard when clicked on it
我已经在其父是 SingleChildScrollView 的列中实现了 TextFormField。 但不知何故,当我单击 TextFormField 时,它无法自动滚动。
有关更多详细信息,我将添加视频 URL。 视频
这是代码:
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
resizeToAvoidBottomPadding: false,
floatingActionButton: FloatingActionButton(
backgroundColor: AppTheme.colors.themeBlue,
child: Icon(Icons.arrow_forward),
onPressed: () {
},
),
body: Container(
color: AppTheme.colors.backgroundLight,
child: Column(
children: <Widget>[
AppBarWidget(
title: Constants.addClient,
),
ProfileImageWidget(),
Container(
height: 100,
width: screenSize.width,
child: ListView(
padding: EdgeInsets.all(AppSize.small),
children: <Widget>[
SizedBox(
height: 10,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
labelText: Constants.clientName,
hintText: Constants.michaelNilson,
// cursorColor: AppTheme.colors.themeBlue,
),
SizedBox(
height: 10,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
labelText: Constants.email,
hintText: Constants.email,
textInputAction: TextInputAction.done,
),
SizedBox(
height: 10,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
labelText: Constants.mobile,
hintText: Constants.mobile,
textInputAction: TextInputAction.done,
),
SizedBox(
height: 10,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
labelText: Constants.followUp,
hintText: Constants.followUp,
textInputAction: TextInputAction.done,
suffixIcon: IconButton(
icon: Icon(
Icons.keyboard_arrow_down,
color: Colors.black87,
),
),
),
SizedBox(
height: 10,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
labelText: Constants.date,
suffixIcon: IconButton(
icon: Icon(
Icons.date_range,
size: 15,
color: Colors.black87,
),
),
hintText: Constants.date,
textInputAction: TextInputAction.done,
),
SizedBox(
height: 10,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
suffixIcon: IconButton(
icon: Icon(
Icons.access_time,
size: AppSize.medium,
color: Colors.black87,
),
),
hintText: Constants.time,
labelText: Constants.time,
textInputAction: TextInputAction.done,
),
SizedBox(
height: AppSize.small,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
labelText: Constants.notes,
hintText: Constants.notes,
textInputAction: TextInputAction.done,
),
SizedBox(
height: AppSize.small,
),
],
)
)
],
),
),
);
}
详情请看视频:
删除resizeToAvoidBottomPadding: false,
现在已弃用
并使用resizeToAvoidBottomInset: true,
编写 animation 并在 TextField 获得焦点时向上移动您的 TextField 容器。
有关组合动画的知识,请参阅Dart 的 Flutter 框架中的组合动画和链接动画
使用 Flutter 的 FocusNode 检测 TextField 上的焦点
这是一个例子:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Animation Demo',
theme: new ThemeData(
primaryColor: new Color(0xFFFF0000),
),
home: new FormDemo(),
);
}
}
class FormDemo extends StatefulWidget {
@override
_FormDemoState createState() => _FormDemoState();
}
class _FormDemoState extends State<FormDemo> with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
FocusNode _focusNode = FocusNode();
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
_animation = Tween(begin: 300.0, end: 50.0).animate(_controller)
..addListener(() {
setState(() {});
});
_focusNode.addListener(() {
if (_focusNode.hasFocus) {
_controller.forward();
} else {
_controller.reverse();
}
});
}
@override
void dispose() {
_controller.dispose();
_focusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false, // this avoids the overflow error
appBar: AppBar(
title: Text('TextField Animation Demo'),
),
body: new InkWell( // to dismiss the keyboard when the user tabs out of the TextField
splashColor: Colors.transparent,
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: Container(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
SizedBox(height: _animation.value),
TextFormField(
decoration: InputDecoration(
labelText: 'I move!',
),
focusNode: _focusNode,
)
],
),
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.