dart - Flutter - SingleChildScrollView 干扰列

coder 2023-05-10 原文

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

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

有什么解决办法吗？

没有 SingleChildScrollView 的 Gif 屏幕不会滚动并且 FloatingActionButton 位于屏幕底部

带有 SingleChildScrollView 的 Gif 屏幕滚动并且他 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: (){}
                ),                    
              )
            ],
        ),
      )            
    );
  }
}

最佳答案

我建议不要以您在此处的方式使用 FloatingActionButton。 FloatingActionButton 应该用于始终需要始终显示在屏幕上的操作。见 Material guidelines on button usage有关其他可滚动按钮类型的建议，例如 RaisedButton 和 FlatButton。您可以在此处使用 RaisedButton，但我认为最好将屏幕设置为对话框并将保存操作放在 AppBar 中，如 suggested在您的其他问题中。

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

关于dart - Flutter - SingleChildScrollView 干扰列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45982176/

有关dart - Flutter - SingleChildScrollView 干扰列的更多相关文章

Flutter 环境变量配置和flutter doctor中的错误解决 - 2
一、环境变量右键点击我的电脑-属性：然后找到环境变量 1.Android的SDK不在C盘的话需要额外配这个到用户环境变量：ANDROID_HOMED:\AndroidSDK2.然后在系统变量：Path中添加一条这样的值 D:\Flutter\flutter\bin 这个值写flutter包解压的实际地址即可 3.在系统变量中添加两个镜像变量：变量名：FLUTTER_STORAGE_BASE_URL 变量值：https://storage.flutter-io.cn 变量名：PUB_HOSTED_URL 变量
ruby - 多字节字符是否会干扰正则表达式中的结束行字符？ - 2
使用这个正则表达式:regex1=/\z/以下字符串匹配:"hello"=~regex1#=>5"こんにちは"=~regex1#=>5但是使用这些正则表达式:regex2=/#$/?\z/regex3=/\n?\z/他们表现出不同:"hello"=~regex2#=>5"hello"=~regex3#=>5"こんにちは"=~regex2#=>nil"こんにちは"=~regex3#=>nil什么是干扰？字符串编码为UTF-8，操作系统为Linux(即$/为"\n")。多字节字符是否会干扰$/？怎么办？最佳答案你报告的问题肯定是Re
javascript - Google Dart JavaScript 转换器是否支持旧版浏览器？ - 2
GoogleDartJavaScript转换器支持旧版浏览器还是仅支持现代浏览器？最佳答案根据technicaloverviewofitsofficialsite:您将能够以多种方式运行Dart代码:1.将Dart代码转换为可在任何现代浏览器中运行的JavaScript:Chrome、Safari5+和Firefox4+(即将推出更多浏览器支持)。2.在服务器端直接在虚拟机中执行Dart代码3.使用Dartboard在任何浏览器窗口中编写、修改和执行小型Dart程序Dart->JavaScript编译器几乎不可能支持旧版浏览器。
javascript - 用 Dart 可视化？ - 2
我的工作涉及大量的可视化。我一直在用D3.js和JavaScriptInfovistoolkit我最近了解到Dart如何成为开发Web应用程序的新方法。Q1。Dart是否提供任何用于可视化的库(某种级别的D3.js或JavaScriptInfovistoolkit)？Q2。如果我继续使用Dart，我可以使用D3.js吗？/JavascriptInfovistoolkit与Dart一起？编辑:我在互联网上发现wecanuseJavascriptalongwithDart.我经历了DartFAQ，但无法真正找到与可视化库或D3.js本身相关的任何内容。最佳答案
javascript - 如何在不干扰标签内的输入 radio 的情况下更改标签文本？ - 2
在我的html模板中，我有一个标签，里面有一个输入radio:mytext我需要用jquery更改标签的文本。我试过这个:$('#myid').html('mynewtext');或$('#myid').text('mynewtext');但是当我这样做时，我失去了我的输入radio。如何保留标签内的输入单选框并修改标签的文本？最佳答案试试这个:$('#myid').contents().last().replaceWith('mynewtext'); 关于javascript-如何
javascript - Dart vs JavaScript——它们是编译语言还是解释语言？ - 2
Dart被认为是编译语言还是解释语言？同样的问题也适用于JavaScript。问题原因:我去过watchinganinterview与dart的创始人一起，在7:10LarsBak说:"Whenyou[...]inaJavaScriptprogram,youactuallyexecuteJavaScriptbeforeyoustartrunningtherealprogram.InDart,youdon'texecuteanythingbeforethefirstinstructioninmainisbeingexecuted".在我看来，他是在说JavaScript是一种编译型语言，
javascript - jQuery 正在干扰 javascript - 2
我正在为客户构建网站，并使用预构建主题作为起点。它带有一个js文件，该文件具有用于移动导航的点击功能，一切正常，但是当我为jQuery添加脚本标记时，移动导航中断并且控制台出现此错误:UncaughtTypeError:Cannotsetproperty'onclick'ofnull我该如何解决这个问题？导致错误的js行是document.getElementById('mobile-navigation').onclick=function(){我尝试更改该行以使用jQuery来选择元素，但这只会在js文件中进一步导致另一个错误。我该如何解决这个问题？在html中: -->
javascript - Dart js-interop 与 jquery ui - 2
我是Dart的新手，我在开始使用js-interop库时遇到了问题。我想从jqueryui添加一个slider到我的页面，但我不知道如何从Dart进行slider()设置调用。js-interop是这样做的正确方法吗？对此提供一些帮助将不胜感激。voidmain(){js.scoped((){varslider=query('#slider-range');varoptions=js.map({'range':true,'values':[17,67]});//Thisdoesn'twork.Elementhasnomethodnamedslider.slider.slider(opt
javascript - 处理 DART 中的事件 - 2
我是DART的新手。我阅读了语言概述并在DART编辑器中检查了示例代码。到目前为止，我找不到如何处理DART中的事件。例如onclick="call_dart_method()".我们如何处理DART中的事件？最佳答案这不是你在Dart上的做法在此处查看“事件”部分下的内容:http://www.dartlang.org/articles/improving-the-dom/elem.onClick.listen((event)=>print('click!')); 关于javasc
javascript - 相当于 Array.prototype.map() 的 Dart？ - 2
我尝试从Dart中的map列表中获取ID。在JavaScript中会是这样的:varlist=[{id:3,name:'third'},{id:4,name:'fourth'}];varresult=list.map(function(x){returnx.id;});这应该给出结果[3,4]在Dart中是否有一种简单的方法可以做到这一点？到目前为止，我能够做到这一点(在Dart中):varlist=[{'id':3,'name':'third'},{'id':4,'name':'fourth'}];varresult=list.map((x)=>x['id']);结果是“Mapped

dart - Flutter - SingleChildScrollView 干扰列

有关dart - Flutter - SingleChildScrollView 干扰列的更多相关文章

随机推荐