Ios 如何在键盘外观上设置颤振布局动画

我正在开发一个颤振应用程序，主要是针对iOS的

我的一个视图有一个文本字段，当您点击它时，iOS键盘就会出现。问题是-布局不会像在本机iOS应用程序中那样顺利更改。相反，即使在键盘打开动画完成之前，它也会立即跳到最终可用的屏幕高度

我尝试在

AnimatedSize

和

AnimatedContainer

中包装我的SafeArea元素，但没有效果

我的布局代码：

SafeArea(child:
  Column(children:[
    TextField(...)
  ])
)

当键盘出现时，如何使布局平滑调整大小

预期：

实际的

---

您应该尝试设置

resizetoavidobtompadding:false

如下：

return Scaffold(
      key: _scaffoldKey,
      resizeToAvoidBottomPadding: false,

---

您可以使用此软件包“键盘可见性”并收听

键盘可见性

。然后，您可以给出实现功能的逻辑，就像缩短主容器的高度一样。这并不完美。但我认为这是目前唯一的办法。

我使用这样的方法：

AnimatedPadding(
        padding: MediaQuery.of(context).viewInsets,
        duration: const Duration(milliseconds: 100),
        curve: Curves.decelerate,
        child: ....
    )

---

这将基于viewInsets（软件键盘高度）设置填充动画。

使用AnimatedPadding小部件可以实现所需的输出，尽管这并不完美，但总比没有好：d

import'dart:math'；
进口“包装：颤振/材料.省道”；
最终颜色深蓝色=颜色。来自argb（255,18,32,47）；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主题：ThemeData.dark（）.copyWith（脚手架背景颜色：深蓝色），
debugShowCheckedModeBanner:false，
家：脚手架(
正文：中(
子项：MyWidget（），
),
),
);
}
}
类MyWidget扩展了无状态Widget{
@凌驾
小部件构建（构建上下文）{
返回安全区(
底部：错误，
孩子：脚手架(
//！！！重要部分>禁用默认脚手架插入
resizeToAvoidBottomInset:false，
appBar:appBar(
标题：文本（“Appbar标题”），
),
主体：堆栈(
儿童：[
滚动条(
子项：ListView.builder(
填充：所有边缘设置（0.0），
物品计数：30，
itemBuilder：（上下文，i）{
返回容器(
身高：100，
宽度：double.infinity，
颜色：颜色
.primaries[Random（）.nextInt（Colors.primaries.length）]，
);
},
),
),
对齐(
对齐：对齐。左下角，
子对象：动画填充(
填充：MediaQuery.of（context）.viewInsets，
//您可以根据需要更改持续时间和曲线：
持续时间：常数持续时间（毫秒：200），
曲线：曲线。减速，
子项：InputField（）），
)
],
)),
);
}
}
类InputField扩展StatefulWidget{
InputField（{Key}）：超级（Key:Key）；
@凌驾
_InputFieldState createState（）=>\u InputFieldState（）；
}
类_InputFieldState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回容器(
颜色：颜色。灰色[100]，
填充：常量边集。对称（垂直：6），
孩子：排(
儿童：[
大小盒子(
宽度：60，
子：图标（图标。添加照片），
),
灵活的(
孩子：TextField(
样式：Theme.of（context）.textTheme.bodyText1，
装饰：输入装饰(
边框：InputBorder.none，
hintText:“输入文本…”，
),
),
),
大小盒子(
宽度：60，
子：图标（Icons.send），
),
],
),
);
}
}

输出->

您需要使用软件包并使用它来触发您的AnimatedContainer或AnimatedPadding

bool _isKeyboardActive = false;
@override
void initState() {
  super.initState();
  //add keyboard visibility Listener
  KeyboardVisibility.onChange.listen((event) {
    setState(() {
      _isKeyboardActive = event;
    });
  });
}


Widget build(BuildContext context){
    return AnimatedContainer(
       width: _isKeyboardActive ? 200 : MediaQuery.of(context).size.width,
       height: 60,
       color: Colors.red,
       duration: Duration(milliseconds: 600)
    )
}

---

以此为基础。

你能用gif/截图更新你的问题吗？@miguelpruivo附加gifs。由于FPS率较低，差异不太明显，但我希望能清楚地知道我想要实现的是什么-当键盘出现时，安全区域的平滑大小。您是否尝试过将输入字段仅包装在

动画容器中？您可能想用一些代码编辑您的问题。当您启动键盘时，键盘正在使用底部的
视图插图
，视图正在重建以匹配更改，但实际上并没有随之设置动画。这是一个很好的问题。这可能是因为调试模式吗？尝试释放apk或使用--profile您可以在github上检查此问题
https://github.com/flutter/flutter/issues/19279
这可能会有帮助，虽然这段代码可以解决问题，但确实有助于提高您的帖子质量。请记住，您将在将来回答读者的问题，而这些人可能不知道您的代码建议的原因
bool _isKeyboardActive = false;
@override
void initState() {
  super.initState();
  //add keyboard visibility Listener
  KeyboardVisibility.onChange.listen((event) {
    setState(() {
      _isKeyboardActive = event;
    });
  });
}


Widget build(BuildContext context){
    return AnimatedContainer(
       width: _isKeyboardActive ? 200 : MediaQuery.of(context).size.width,
       height: 60,
       color: Colors.red,
       duration: Duration(milliseconds: 600)
    )
}