Flutter-SingleChildScrollView干扰列 [英] Flutter - SingleChildScrollView interfering in columns

问题描述

我创建了一个与列兼容的屏幕，但是由于键盘的原因，我需要滚动。

I created a screen that works well with the columns, but I needed to scroll because of the keyboard.

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

When you insert the SingleChildScrollView or the ListView attribute the MainAxisAlignment.spaceBetween, it no longer works.

有什么解决方案吗？

Gif没有 SingleChildScrollView 屏幕没有滚动，并且 FloatingActionButton 在屏幕底部

Gif without the SingleChildScrollView the screen does not roll and the FloatingActionButton is at the bottom of the screen

Gif和 SingleChildScrollView 屏幕滚动，然后他 FloatingActionButton 不在屏幕底部

Gif with SingleChildScrollView the screen roll and he FloatingActionButton is not in bottom of the screen

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

推荐答案

I建议您不要按照此处的方式使用 FloatingActionButton 。 FloatingActionButton 应该用于始终需要始终显示在屏幕上的动作。请参阅有关按钮使用的材料准则，以获得有关其他可以使用的按钮类型的建议滚动，例如 RaisedButton 和 FlatButton 。您可以在此处使用 RaisedButton ，但我认为最好将屏幕设置为对话框并将保存操作放入 AppBar ，就像我在另一个问题中建议一样。

I would recommend against using FloatingActionButton in the way you are doing here. FloatingActionButton should be used for actions that always need to always be on screen at all times. See the Material guidelines on button usage for suggestions on other button types that can be scrolled, like RaisedButton and FlatButton. You could use a RaisedButton here, but I think it would be better to make your screen a dialog and put the save action in the AppBar as I suggested in your other question.

如果您确实决定使用 RaisedButton 或 FlatButton ，请记住，滚动条通常不会更改其项间距取决于其容器的大小。除了使用 MainAxisAlignment.spaceBetween ，您还可以在 RaisedButton Padding c $ c>将其与 TextField 元素分开。这样可以确保它们之间的距离相等，而与旋转，屏幕大小以及键盘是否向上无关。

If you do decide to use a RaisedButton or FlatButton, keep in mind that scrollables don't normally change their item spacing based on the size of their container. Instead of using MainAxisAlignment.spaceBetween, you could put some Padding around your RaisedButton to separate it from the TextField elements. This will ensure that they are spaced the same distance apart regardless of rotation, screen size, and regardless of whether the keyboard is up.

这篇关于Flutter-SingleChildScrollView干扰列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！