草庐IT

dart - 在 Column Flutter 中居中展开的 ListView

coder 2023-07-21 原文

我正在尝试构建一个布局，其中顶部和底部有两个 Text 对象，它们保持文具状态，ListView 位于它们的中心。

这是屏幕的代码

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 40.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                margin: EdgeInsets.symmetric(vertical: 40.0),
                child: Text(
                  DateFormat("hh:mm 'PM ,'  MMMM d").format(DateTime.now()),
                  style: Theme.of(context).textTheme.title,
                ),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: 4,
                  itemBuilder: (BuildContext context, int index) =>
                      CustomAppText(
                        text: 'Custom App',
                      ),
                ),
              ),
              Container(
                margin: EdgeInsets.symmetric(vertical: 40.0),
                child: Text(
                  "Settings",
                  style: Theme.of(context).textTheme.title,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

给定代码的输出

我正在寻找的设计

我试过使用中心小部件，但它没有使 ListView 居中

最佳答案

ListView 会填满整个展开的小部件，这就是为什么使用中心小部件不起作用的原因，因此应该添加 shr​​inkWrap: true，这样 ListView 只会占用其子级的高度。

在浏览了有关 Flexible Widget 的文档之后

Flexible, which does not force the child to fill the available space.

做出了改变并且工作起来很有魅力

Flexible(
  child: ListView.builder(
  shrinkWrap: true,
  itemCount: 4,
  itemBuilder: (BuildContext context, int index) =>
    CustomAppText(
      text: 'Custom App',
    ),
  ),
),

关于dart - 在 Column Flutter 中居中展开的 ListView，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53577835/

中居中展sectionListViewcodedartflutterflutter-layout

有关dart - 在 Column Flutter 中居中展开的 ListView的更多相关文章

  1. ruby-on-rails - 如何在 Prawn 中居中 table ？ - 2

    我在prawn中创建了一个表，并希望通过whih传递:position选项，这在手册中也有记录，但它引发了Method_missing错误。好像这个参数不存在了。我怎样才能让Prawn居中？ 最佳答案 我遇到了同样的错误。从Github上的master安装解决了这个问题。#Gemfilegem'prawn',git:'https://github.com/prawnpdf/prawn.git'IssuethreadonGithub 关于ruby-on-rails-如何在Prawn中居中t

  2. ruby-on-rails - 为什么在私有(private)部分中声明委托(delegate)方法时是公开的？ - 2

    我可以通过将声明放在中使attr_reader(以及相关的attr_writer和attr_accessor)方法私有(private)私有(private)部分:classFooprivateattr_reader:bendFoo.new.b#=>NoMethodError:privatemethod`b'calledfor#但是，Rails的delegate和Ruby标准库的def_delegate不要这样工作。这些委托(delegate)方法始终是公共(public)的。classFooattr_reader:bdefinitialize@b='b'endendrequire'f

  3. ruby - 在 Ruby 中展平字符串数组 - 2

    将字符串数组转换为字符串的最佳惯用(最干净)方法是什么，同时保留每个元素的引号。换句话说，从这个:a=["file1.txt","file2.txt","file3.txt"]我需要得到这个"'file1.txt''file2.txt''file3.txt'"这里单引号和双引号可以互换。我知道的最好方法是使用映射和注入(inject)/减少。例如:a.map{|dir|"'"+dir+"'"}.join('')eg2:a.reduce("'"){|acc,dir|acc+=dir+"'"}可以通过避免创建临时字符串(+运算符)来提高性能。但这不是我的主要问题。有没有更简洁的方法来达到相

  4. javascript - Google Dart JavaScript 转换器是否支持旧版浏览器？ - 2

    GoogleDartJavaScript转换器支持旧版浏览器还是仅支持现代浏览器？ 最佳答案 根据technicaloverviewofitsofficialsite:您将能够以多种方式运行Dart代码:1.将Dart代码转换为可在任何现代浏览器中运行的JavaScript:Chrome、Safari5+和Firefox4+(即将推出更多浏览器支持)。2.在服务器端直接在虚拟机中执行Dart代码3.使用Dartboard在任何浏览器窗口中编写、修改和执行小型Dart程序Dart->JavaScript编译器几乎不可能支持旧版浏览器。

  5. javascript - 用 Dart 可视化？ - 2

    我的工作涉及大量的可视化。我一直在用D3.js和JavaScriptInfovistoolkit我最近了解到Dart如何成为开发Web应用程序的新方法。Q1。Dart是否提供任何用于可视化的库(某种级别的D3.js或JavaScriptInfovistoolkit)？Q2。如果我继续使用Dart，我可以使用D3.js吗？/JavascriptInfovistoolkit与Dart一起？编辑:我在互联网上发现wecanuseJavascriptalongwithDart.我经历了DartFAQ，但无法真正找到与可视化库或D3.js本身相关的任何内容。 最佳答案

  6. javascript - 如何在 ListView React-native 中过滤数据？ - 2

    我正在尝试过滤我的数组对象列表，然后尝试使用新数据源在ListView中显示。但是，该列表未被过滤。我知道我的过滤器功能正常工作。(我在console.log里查过了)我正在使用Redux将我的状态映射到prop。然后尝试过滤Prop。这是错误的方法吗？这是我的代码:/*globalfetch:false*/import_from'lodash';importReact,{Component}from'react';import{ListView,TextasNText}from'react-native';import{connect}from'react-redux';import

  7. javascript - 为什么我的 map 在我的 jQuery Mobile/Google Maps API3 应用程序中居中？ - 2

    我的jQueryMobile网络应用程序中有一张由GoogleMapsJavascriptAPI3提供支持的map。我添加了一个带有黑色边框的圆圈。如果您直接使用map转到我的应用程序的这个页面，map会正确地居中在圆的中心。http://goo.gl/XvLST如果您先转到我的应用程序的主页(http://goo.gl/0IWgE)，然后单击进入带有map的页面，则map是居中错误(map应以圆心为中心)。缺失整个灰色区域。为什么当我从我的主页点击带有map的页面时，map会出错，但如果我直接访问带有map的页面，map会正常工作？我不能使用Ajax加载带有data-ajax='fa

  8. javascript - react native ListView onEndReached 多次调用 - 2

    我在使用ReactNative中的ListViewonEndReached组件时遇到了一些问题。渲染代码:@autobind_fetchMoreHistory(){console.log("Fetchmorehistorycalled");}我打开屏幕的那一刻_fetchMoreHistory被调用了两次并且在到达onEndReached之后正常工作。有人可以帮助调试吗？ 最佳答案 我遇到了同样的问题并进行了很多搜索但没有找到任何答案，所以我使用了一个条件来检查第一个请求是否得到了我再次触发的数据，否则我没有例子//onEndRea

  9. javascript - win-listview的高度是怎么设置的？ - WinJS - 2

    这让我难以自拔。我不知道如何使ListView的高度自动。即扩展ListView的高度以占据它需要的所有空间，并让外部容器提供溢出滚动功能。不幸的是，我似乎找不到任何关于此的文档。帮助会很大。谢谢! 最佳答案 默认情况下，ListView控件的高度为400像素。那是在ui-light.css文件的第1421行。您可以通过在页面上添加规则来覆盖它，例如:.win-listview{高度:100%；/*(或者你可以用'600px'之类的绝对指定)*/关于thispage在开发中心它说...SettingtheListViewcontro

  10. javascript - 在 underscore.js 中展平嵌套数组/对象 - 2

    我有一个对象数组，如下所示(尽管下面的示例在数组中只有一个元素)[{"uptime":0,"load":{"x":0.11,"y":0.22,"z":0.33},"cpu":[{"u":111,"n":112,"s":113,"i":114,"q":115},{"u":211,"n":212,"s":213,"i":214,"q":215}]}]我尝试使用underscore.js将每个元素展平，因此整个数组如下所示:[{"uptime":0,"load_x":0.11"load_y":0.03"load_z":0.01,"cpu1_u":111,"cpu1_n":112,"cpu1_

随机推荐