Flutter-键盘在屏幕上抬起FloatingActionButton [英] Flutter - Keyboard is raising on screen the FloatingActionButton

问题描述

我当时使用的是 TextField ，但是键盘却弹出了 FloatingActionButton 。我想知道键盘是否可能不引发 FloatingActionButton ？

在下面的代码中，我放置了两个 FloatingActionButton 有两种不同的方式，但是两个键盘都向上，这阻碍了字段的填充，因为FAB与 TextField在同一行，根据下面的gif。

有什么方法可以解决这个问题？

  import'package：flutter / material.dart'; 
导入 dart：ui为ui； 
 
 void main（）{
 runApp（new MyApp（））; 
} 
 
类MyApp扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return new MaterialApp（
 home：new MyHomePage（），
）; 
} 
} 
 
类MyHomePage扩展了StatefulWidget {
 @override 
 _MyHomePageState createState（）=>新的_MyHomePageState（）; 
} 
 
类_MyHomePageState扩展State< MyHomePage> {
 @override 
 Widget build（BuildContext context）{
 final ui.Size logicalSize = MediaQuery.of（context）.size; 
 final double _width = logicalSize.width; 
返回新的Scaffold（
 appBar：新的AppBar（backgroundColor：新的颜色（0xFF26C6DA））），
的主体：new Stack（
的孩子：< Widget> [新的ListView（
的孩子：< Widget> [
新的TextField（
的装饰：const InputDecoration（
 labelText： Description，
），
样式：Theme.of（context）.textTheme.title，
），
新的TextField（
装饰：const InputDecoration（
 labelText：描述，
） ，
样式：Theme.of（context）.textTheme.title，
），
新的TextField（
装饰：const InputDecoration（
labelText）， Description， 
），
样式：Theme.of（context）.textTheme.title，
），
 ]，
），
 new Positioned（
 bottom：16.0，
 left：（_width / 2）-28，
 child：new FloatingActionButton（
 backgroundColor：new Color（0xFFE57373），
 child：new Icon（Icons.check），
 onPressed：（）{} 
），
）
]，
），
 floatActionButton：新的FloatingActionButton（
 backgroundColor：新的Color（0xFFE57373），
子对象：new Icon（Icons.check），
），
 ）; 
} 
} 
  

解决方案

它

浮动动作按钮表示应用程序中的主要动作，例如创建新项目。并不是用来确认更改并关闭包含文本字段列表的全屏对话框的方法。

而不是使用 FloatingActionButton ，我建议在<$ c $中使用 FlatButton 的 AppBar c>操作广告位，例如在

您可以看到以下示例如何在图库源代码。

I was using the TextField but the keyboard is raising the FloatingActionButton. I wonder if it is possible for the keyboard not to raise a FloatingActionButton?

In the code below I put two FloatingActionButton in two different ways but in both the keyboard goes up, which hinders the field filling since the FABs are in the same line as the TextField, according to the gif below.

Is there any way to solve this?

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(      
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final ui.Size logicalSize = MediaQuery.of(context).size;
    final double _width = logicalSize.width;
    return new Scaffold(
      appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),        
      body: new Stack(
        children: <Widget>[
          new ListView(
            children: <Widget>[
              new TextField(
                decoration: const InputDecoration(
                  labelText: "Description",
                ),
                style: Theme.of(context).textTheme.title,
              ),
              new TextField(
                decoration: const InputDecoration(
                  labelText: "Description",
                ),
                style: Theme.of(context).textTheme.title,
              ),
              new TextField(
                decoration: const InputDecoration(
                  labelText: "Description",
                ),
                style: Theme.of(context).textTheme.title,
              ),
            ],
          ),
          new Positioned(
            bottom: 16.0,
            left: (_width / 2) - 28,   
            child: new FloatingActionButton(
              backgroundColor: new Color(0xFFE57373),
              child: new Icon(Icons.check),
              onPressed: (){}
            ),            
          )
        ],        
      ),
      floatingActionButton: new FloatingActionButton(
        backgroundColor: new Color(0xFFE57373),
        child: new Icon(Icons.check),
      ),
    );
  }
}

解决方案

It looks like you're designing a full screen dialog.

A floating action button represents the primary action in an application, like creating a new item. It is not what you'd use to confirm changes and dismiss a full screen dialog that contains a list of text fields.

Rather than using a FloatingActionButton, I would a recommend an AppBar with a FlatButton in the actions slot, like in this Material design example:

You can see an example of how to build a full-screen dialog in Flutter in the Gallery source code.

这篇关于Flutter-键盘在屏幕上抬起FloatingActionButton的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！