Flattern - SingleChildScrollView Interferenz in Spalten

Question

Ich habe einen Bildschirm erstellt, der gut mit den Spalten funktioniert, aber ich musste wegen der Tastatur scrollen. Wenn Sie das SingleChildScrollView oder das ListView Attribut MainAxisAlignment.spaceBetween einfügen, funktioniert es nicht mehr.

Gab es eine Lösung dafür?

Gif ohne SingleChildScrollView der Bildschirm nicht rollen wird und die FloatingActionButton befindet sich am unteren Rand des Bildschirms

Gif mit SingleChildScrollView die Rasterwalze und er FloatingActionButton ist nicht in unteren Rand des Bildschirms

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

würde ich empfehlen, FloatingActionButton nicht so zu verwenden, wie Sie es hier tun. FloatingActionButton sollte für Aktionen verwendet werden, die immer immer auf dem Bildschirm angezeigt werden müssen. Beispiele für andere Scroll-Typen wie RaisedButton und FlatButton finden Sie unter Material guidelines on button usage. Sie könnten hier eine RaisedButton verwenden, aber ich denke, es wäre besser, Ihren Bildschirm zu einem Dialog zu machen und speichern Aktion in der AppBar als I suggested in Ihrer anderen Frage.

Wenn Sie sich für die Verwendung einer RaisedButton oder FlatButton entscheiden, beachten Sie, dass Scrolldateien ihren Objektabstand normalerweise nicht anhand der Größe ihres Containers ändern. Anstatt MainAxisAlignment.spaceBetween zu verwenden, können Sie Padding um Ihre RaisedButton setzen, um sie von den TextField Elementen zu trennen. Dadurch wird sichergestellt, dass sie unabhängig von der Drehung, der Bildschirmgröße und unabhängig davon, ob die Tastatur hochgefahren ist, den gleichen Abstand haben.

Answer 2

Folgen Sie dem unten stehenden Code, um sich zu registrieren.

MainAxisAlignment.spaceBetween wurde je nach Bildschirmgröße durch dynamisches Padding ersetzt.

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:(){} 
       ), 
      ) 
      ], 
     ), 
    ) 
    ); 
    } 
}