2017-08-30 41 views
4

私はTextFieldを使用していましたが、キーボードはFloatingActionButtonを上げています。キーボードがFloatingActionButtonを上げることはできないのだろうか?Flutter - キーボードがFloatingActionButtonの上で浮動しています

以下のコードでは、FloatingActionButtonを2つの異なる方法で配置していますが、両方のキーボードが上に移動するため、FABがTextFieldと同じ行にあるのでフィールドの入力が妨げられます。

これを解決する方法はありますか?

enter image description here

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), 
    ), 
    ); 
    } 
} 

答えて

3

フルスクリーンダイアログを設計しているように見えます。

フローティングアクションボタンは、新しいアイテムの作成など、アプリケーションの主要なアクションを表します。変更を確認したり、テキストフィールドのリストを含む全画面ダイアログを閉じたりするのは、あなたが使用するものではありません。

save

あなたは、フルを構築する方法の例を見ることができます:

むしろFloatingActionButtonを使用するよりも、私はMaterial design exampleこの中のように、actionsスロットにFlatButtonAppBarをお勧めしますGallery source codeのFlutterのスクリーンダイアログ。

+0

ありがとう、私はマテリアルデザインのコンセプトを理解しましたが、Flutterを探索するためにStackとPositionedが常に上がることに気付きました。回避するには、列を使用してコードを再構築し、列mainAxisAlignment:MainAxisAlignment.spaceBetweenのS​​ingleChildScrollView属性を配置するときにのみ動作し、動作を停止します。だから私は別の質問を開いたhttps://stackoverflow.com/questions/45982176/flutter-singlechildscrollview-interfering-in-columns – rafaelcb21

関連する問題