草庐IT

flutter - 将 ListView 的子项与顶部和底部对齐

coder 2023-07-22 原文

长话短说

是否可以像 Column spaceBetween 对齐那样对齐 ListView 的 子元素？

就像这个截图:

我试图解决的问题:

一开始我有一个 Column 小部件和 2 个 child 。 列的 对齐设置为spaceBetween。这正是我想要的，一个小部件在顶部，一个在底部。但是当我单击输入以添加凭据时，键盘导致了此 GitHub issue 中描述的溢出问题。 .因此，为了修复它，我将 Column 替换为 ListView。但现在我的 child 小部件卡在屏幕顶部。

我的完整 LoginScreen 代码:

import 'package:flutter/material.dart';

import '../widgets/button.dart';
import '../widgets/input.dart';
import '../widgets/logo.dart';

class LoginScreen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Background(),
          Wrapper(),
        ],
      ),
    );
  }
}

class Background extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
          colors: [
            Color(0xfff6f6f6),
            Colors.white,
          ],
        ),
      ),
    );
  }
}

class Wrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Logo(LogoColor.dummy_black),
        Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: BottomPart(),
          ),
        ),
      ],
    );
  }
}

class BottomPart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Input('User name'),
        Input('Password'),
        Button(
          'Log in',
          onPressed,
        ),
      ],
    );
  }

  void onPressed() {}
}

最佳答案

你可以使用 ListView 的属性 reverse

reverse: true,

然后更改 ListView 子级的顺序。

关于flutter - 将 ListView 的子项与顶部和底部对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54957026/

子项ListViewcodesectionWidgetflutter

有关flutter - 将 ListView 的子项与顶部和底部对齐的更多相关文章

  1. ruby-on-rails - 在页面的最底部包含 javascript 文件 - 2

    我有一个Rails应用程序。还有一个javascript(javascript1.js)文件必须包含在每个View的最底部。我把它放在/assets/javascripts文件夹中。Application.js包含以下代码//=requirejquery//=requirejquery_ujs//=someotherfiles//=require_directory.即使Application.js中不包含javascript1.js，它也会自动包含，不是吗？那么我怎样才能做我想做的事呢？ 最佳答案 单独定义、包含和执行您的java

  2. 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      变量

  3. 微信小程序顶部标题栏与胶囊对齐 - 2

    介绍    最近在做微信小程序时，顶部标题栏总是与胶囊对不齐。往往是在这款手机上对齐了，在另外一款手机差很多。我在查阅资料后，提出了一种方法解决这个问题，即：在页面onLoad或组件created时，利用微信小程序提供的API，获取系统状态栏高度和胶囊信息，进而动态调整顶部标题栏样式。在苹果、小米、荣耀手机做验证，能做到精准对齐。理论        胶囊样式应该是垂直居中，有1px的border，border-radius为18px。        若要使顶部标题栏与胶囊对齐，则其高度必须是导航栏高度，标题栏内容也要垂直居中，顶部标题栏的外边距或内边距必须是状态栏高度。        如果顶部

  4. ruby - Prawn :有没有办法让一个盒子里的所有内容垂直对齐？ - 2

    我正在尝试将一些内容垂直居中放置在bounding_box中。对于单个文本，这没问题:bounding_box([0,bounds.top],:width=>pdf.bounds.right,:height=>pdf.bounds.top)dotext"verticallyalignedinthesurroundingbox",:valign=>:centerend但是如果我的边界框中有多个元素，我该怎么办:bounding_box([0,bounds.top],:width=>pdf.bounds.right,:height=>pdf.bounds.top)dotext"vertic

  5. 脚本底部的 Ruby 方法？ - 2

    我使用的是ruby​​1.8.7。我可以发誓我之前已经在脚本底部编写了我的函数并且运行良好。我必须将它们放在顶部吗？这似乎是他们现在唯一的工作方式。没什么大不了的。我只是更喜欢将它们放在底部，所以我想我会问。 最佳答案 您可以在一个或多个BEGINblock中执行初始化代码(继承自Perl，后者继承自awk)。can_i_do_this?#=>yesBEGIN{defcan_i_do_this?puts"yes"end}为了完整起见，还有ENDblock:END{can_i_do_this?#=>yes}defcan_i_do_th

  6. ruby - 如何将 ruby 字符串向左或向右对齐？ - 2

    我有几个ruby字符串，我想适本地左右对齐。我现在使用"Name".center(20,"")获取"(7spaces)Name(8spaces)"如何实现"Name(15spaces)"或"(15spaces)Name"谢谢。 最佳答案 "Name".ljust(19)"Name".rjust(19) 关于ruby-如何将ruby字符串向左或向右对齐？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/

  7. ruby - 如何删除 YAML 文件顶部的 '---'？ - 2

    我正在用Ruby修改YAML文件。在我写回修改后的YAML后，我看到在文件顶部添加了一个---。这是如何添加的以及如何删除它？ 最佳答案 YAMLspec说:YAMLusesthreedashes(“---”)toseparatedirectivesfromdocumentcontent.Thisalsoservestosignalthestartofadocumentifnodirectivesarepresent.例子:#Rankingof1998homeruns----MarkMcGwire-SammySosa-KenGrif

  8. ruby - 我怎样才能避免在 Ruby 1.9 中的每个 UTF-8 文件的顶部放置神奇的编码注释？ - 2

    我有一个Rails项目，里面有很多西里尔字符串。它在Ruby1.8上运行良好，但Ruby1.9假定源文件是US-ASCII编码的，除非您在源文件顶部提供#encoding:utf-8注释。此时文件不被视为US-ASCII。是否有更简单的方法告诉Ruby“此应用程序是UTF8编码的。请将所有和任何包含的源文件视为UTF8，除非另有声明”？更新:我写了“Howtoinserttheencoding:UTF-8directiveautomaticallyinRuby1.9files”，它会在需要时自动附加编码指令。 最佳答案 我觉得你可以

  9. javascript - Chrome 和 Firefox 中的 SVG 文本对齐不一致 - 2

    我正在Leaflet.jsmap上绘制SVG标记图标。图标代表气象站，它们根据风向旋转，并以叠加层的形式显示平均风速。我已经能够让它在Chrome中按预期工作，但文本位置在Firefox中关闭。左边是Chrome(55.0.2883.95)，右边是Firefox(50.0.1)。这是我正在使用的自定义Leaflet.Icon类:window.RemoteWind=window.RemoteWind||{};//ThisusesChroma.jstobuildacolorscalewhichisusedforwindspeed.//http://gka.github.io/chroma.

  10. javascript - 如何在打印时对齐文本 - 2

    我有一个只有一行的HTML表格，当用户从中选择任何元素时，第一列会自动完成。我正在填充相应的字段，因此在填充所有数据后，我试图在用户点击print时将表格的某些列数据对齐。我正在使用@mediaprint但它什么也没做Pleasecheckoutthisfiddleconsole.clear()constdata=[//datatopopulateItemNamesearchinputfield{"ItemName":"Butter"},{"ItemName":"Rice"},{"ItemName":"Milk"},{"ItemName":"IceCream"},{"ItemName"

随机推荐