Flutter - SingleChildScrollView干扰列

Question

我创建了一个可以很好地处理列的屏幕，但我需要因键盘而滚动。

当您插入SingleChildScrollView或ListView属性MainAxisAlignment.spaceBetween时，它不再起作用。

有没有解决方案？

的Gif不SingleChildScrollView屏幕不滚动和FloatingActionButton在屏幕

的Gif与SingleChildScrollView屏幕滚动的底部，他FloatingActionButton是不是在屏幕的底部

import 'package:flutter/material.dart'; 

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) { 
    return new Scaffold(
     appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),   
     body: new SingleChildScrollView(
     child: new Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween, 
      crossAxisAlignment: CrossAxisAlignment.center, 
      children: <Widget>[ 
       new Container(
       child: new Column(
        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 Container(
       margin: new EdgeInsets.only(bottom: 16.0), 
       child: new FloatingActionButton(
        backgroundColor: new Color(0xFFE57373), 
        child: new Icon(Icons.check), 
        onPressed:(){} 
       ),      
      ) 
      ], 
     ), 
    )    
    ); 
    } 
} 

Answer 1

我建议您不要在这里使用FloatingActionButton。 FloatingActionButton应该用于始终始终在屏幕上始终显示的操作。请参阅Material guidelines on button usage以获取有关可滚动的其他按钮类型的建议，如RaisedButton和FlatButton。您可以在这里使用RaisedButton，但我认为将屏幕设置为对话框并将保存操作置于AppBar中可能会更好，因为我的suggested在您的其他问题中。

如果您决定使用RaisedButton或FlatButton，请记住，可滚动条通常不会根据其容器的大小更改其项目间距。除了使用MainAxisAlignment.spaceBetween之外，您可以在RaisedButton附近放置一些Padding以将其与TextField元素分开。这将确保无论旋转角度，屏幕大小以及键盘是否打开，它们之间的距离都是相同的。

Answer 2

请按照下面的代码注册。

MainAxisAlignment.spaceBetween已被替换为动态填充，具体取决于屏幕大小。

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 _height = logicalSize.height; 
    return new Scaffold(
     appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),   
     body: new SingleChildScrollView(
     child: new Column(
      //mainAxisAlignment: MainAxisAlignment.spaceBetween, 
      crossAxisAlignment: CrossAxisAlignment.center, 
      children: <Widget>[ 
       new Container(
       height: 300.0, 
       child: new Column(
        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 Container(
       padding: new EdgeInsets.only(top: (_height - 450.0)), 
       margin: new EdgeInsets.only(bottom: 16.0), 
       child: new FloatingActionButton(
        backgroundColor: new Color(0xFFE57373), 
        child: new Icon(Icons.check), 
        onPressed:(){} 
       ), 
      ) 
      ], 
     ), 
    ) 
    ); 
    } 
}