当我选择一个Textfield时,键盘会移到它上面

当我选择一个Textfield时,键盘会移到它上面,第1张

当我选择一个Textfield时,键盘会移到它上面

组成动画并在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,   ) ],          ),        ),      ),    );  }}



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/4929039.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-13
下一篇 2022-11-12

发表评论

登录后才能评论

评论列表(0条)

保存