在键盘隐藏的颤动页面文本字段中

2024-04-27

我正在使用 flutter 制作一个有人可以评论的页面。该页面由 showModalBottomSheet 显示。但是当键盘显示在前面时,文本字段会被键盘隐藏。

    flutter doctor output:
    Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14 18A391, locale zh-Hans-CN)
    [!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
     ✗ Android license status unknown.
    [✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
    [✓] Android Studio (version 3.1)
    [!] VS Code (version 1.30.0)
    [✓] Connected device (1 available)

代码片段:

showModalBottomSheet(
            context: context,
            builder: (BuildContext sheetContext) {
              return new Container(
                height: 230.0,
                padding: const EdgeInsets.all(20.0),
                child: ListView(
                  children: <Widget>[
                    new Column(
                      children: <Widget>[
                        new Row(
                          children: <Widget>[
                            new Text(isMainFloor ? "reply author" :"reply"),
                            new Expanded(
                                child: new Text(
                              title,
                              style: new TextStyle(color: const Color(0xFF63CA6C)),
                            )),
                            new InkWell(
                              child: new Container(
                                padding:
                                    const EdgeInsets.fromLTRB(10.0, 6.0, 10.0, 6.0),
                                decoration: new BoxDecoration(
                                    border: new Border.all(
                                      color: const Color(0xFF63CA6C),
                                      width: 1.0,
                                    ),
                                    borderRadius: new BorderRadius.all(
                                        new Radius.circular(6.0))),
                                child: new Text( "send",
                                  style:
                                      new TextStyle(color: const Color(0xFF63CA6C)),
                                ),
                              ),
                              onTap: () {

                                sendReply(authorId);
                              },
                            )
                          ],
                        ),
                        new Container(
                          height: 10.0,
                        ),
                        new TextFormField(
                          maxLines: 5,
                          controller: _inputController,
                          focusNode: _focusNode,
                          decoration: new InputDecoration(
                              hintText: "balabala……",
                              hintStyle:
                                  new TextStyle(color: const Color(0xFF808080)),
                              border: new OutlineInputBorder(
                                borderRadius: const BorderRadius.all(
                                    const Radius.circular(10.0)),
                              )),
                        ),
                        new Padding(
                            padding: EdgeInsets.only(
                                bottom: MediaQuery.of(context).viewInsets.bottom)),
                      ],
                    )
                  ],
                ),
              );
            });
      }

我在运行提供的最小重现时遇到问题。但是,如果您对小部件使用恒定高度,并且小部件超出了设备上显示的软键盘,则小部件可能会溢出。如果您想在视图上保持恒定的高度,我建议使用可以适应视图大小(即扩展)的小部件TextField.

这是您可以尝试的示例代码。我使用 Expanded 在屏幕上显示详细信息,同时保持 TextField 容器的恒定高度。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  var _inputController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.lightBlueAccent,
                child: ListView.builder(
                  itemCount: 15,
                  itemBuilder: (context, index) {
                    return ListTile(title: Text("List Item $index"));
                  },
                ),
              ),
            ),
            Container(
              height: 120,
              color: Colors.tealAccent,
              child: TextFormField(
                maxLines: 5,
                controller: _inputController,
                decoration: new InputDecoration(
                  hintText: "Text input",
                  hintStyle: new TextStyle(color: Colors.black),
                  border: new OutlineInputBorder(
                    borderRadius:
                        const BorderRadius.all(const Radius.circular(10.0)),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这是它运行时的样子

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在键盘隐藏的颤动页面文本字段中 的相关文章

随机推荐

  • MVC 在视图之间传输数据

    我刚刚开始学习 MVC 并试图了解它是如何工作的 我不想将用户发送到所有编辑 插入和列表操作的不同视图 在我的示例应用程序中 视图包含项目列表 列表下方有一个带有操作 Controller Create 的表单 用于插入新项目 但没有创建视
  • 在cocos2d中添加UIViewController

    我想在 cocos2d 项目中显示 UIViewController 所以我在我的 CCLayer 类中执行此操作 void displayMainMenu CGSize screenSize CCDirector sharedDirect
  • RuntimeException 以外的异常

    Java中除了RuntimeException之外还有其他可能发生的异常吗 谢谢 是的 有Three kinds 检查异常 编译器会让您知道何时可能会抛出它们 最有可能是由于环境中的故障 如果程序可以用它们做某事 则应该捕获它们 否则最好让
  • Oracle:SQL 选择带时间戳的日期

    我有以下数据 SQL gt select from booking session BK ID BK DATE 1 18 MAR 12 10 00 00 000000 2 18 MAR 12 10 25 00 000000 3 18 MAR
  • 在哪里可以找到 Python 的 win32api 模块? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我需要下载 Python 2 7 的它 但似乎找不到它 还有一个新选项 通过 pip 获取 有一个包p
  • 如何将灰度图像转换为像素值列表?

    我正在尝试创建一个 python 程序 它采用灰度 24 24 像素图像文件 我尚未决定类型 因此欢迎提出建议 并将其转换为从 0 白色 到 255 的像素值列表 黑色的 我计划使用这个数组来创建一个MNIST http yann lecu
  • 如何在 Java (NetBeans) 中将禁用按钮的文本颜色更改为黑色?

    我正在使用 NetBeans 用 Ja va 开发 GUI 我喜欢将禁用按钮的文本颜色更改为黑色 以下命令在组合框上运行良好 UIManager getDefaults put ComboBox disabledForeground Col
  • 为什么View Source会发出新的HTTP请求?

    我注意到 Firefox 和 Chrome 都发布了一个新的HTTP请求当你view the source对于您已经加载的网页 当页面本身加载缓慢或根本无法加载时 这尤其令人烦恼 这是为什么 他们不会已经缓存了最初接收的页面的现有源吗 是否
  • Windows Phone 7 可以实现 ping 吗?

    为了了解 WP7 中的网络功能 我将构建一个简单的 ping 应用程序 该应用程序将显示对某个主机的 ICMP ping 请求的结果 然而 不仅System Net NetworkInformation Ping班级不见了 System N
  • Golang导入包错误

    go 5 2 在以下任一位置找不到包 github com googollee go socket io usr local go src github com googollee go socket io 来自 GOROOT Users
  • Python - 使用“astype”进行 pandas 列类型转换不起作用

    这是 DataFrame 的前 5 行 格式很差 但您可以看到其中大多数值都可以转换为数字 df head ID Overall Acceleration Aggression Agility Balance Ball control Co
  • 以多列显示数据

    您好 我需要从 mySQL 表构建一个包含四列的表 这是我现在拥有的
  • 最后执行一定的规则

    我目前正在编写一个 Snakefile 它进行了大量的对齐后质量控制 CollectInsertSizeMetics CollectAlignmentSummaryMetrics CollectGcBiasMetrics 在 Snakefi
  • html 文件中的脚本标记中的 VSCode 中缺少建议

    使用时 stylevscode 中的 javascript 方法
  • Apache 下的子域代理到 Tomcat

    在使用 AJP 代理 Tomcat 时 我在为 Windows 计算机创建子域时遇到问题 这是我的 httpd conf 文件中的内容
  • 针对 Mahout 推荐器使用多个加权数据模型

    我有一个基于用户相似性的布尔偏好推荐器 我的数据集本质上包含关系 其中 ItemId 是用户决定阅读的文章 我想添加第二个数据模型 其中 ItemId 是对特定主题的订阅 我能想到的唯一方法是将两者合并在一起 偏移订阅 ID 这样它们就不会
  • 如何使用画布应用 alpha 图层蒙版以使某些图像透明

    有人可以帮我解决这个问题吗 我想使用画布应用 alpha 图层蒙版以使某些图像透明 多谢 var redImageData redCanvas getContext 2d getImageData 0 0 200 200 overlay v
  • Facebook 绘制所有共同好友的图表

    我有一个应用程序可以显示共同的朋友 在我的节点服务器上 我有以下代码来为我的用户获取共同的朋友 var express require express FB require fb appFB FB extend appId
  • 在嵌套函数中自我捕获

    对于闭包 我通常会附加 weak self 到我的捕获列表 然后进行空检查self func myInstanceMethod let myClosure weak self result Bool in if let this self
  • 在键盘隐藏的颤动页面文本字段中

    我正在使用 flutter 制作一个有人可以评论的页面 该页面由 showModalBottomSheet 显示 但是当键盘显示在前面时 文本字段会被键盘隐藏 flutter doctor output Doctor summary to