草庐IT

flutter - 卡片正在 flutter 中占据所有垂直空间

coder 2023-07-23 原文

我已经使用卡片小部件显示在列表中,但卡片像这样占据了所有垂直空间。

所以它使 ListView 变得更糟并显示类似这样的内容。

我曾尝试将 mainAxisAlignment 更改为最大和最小值,但效果并不理想。

这是我为卡片编写的代码:

Card(
        margin: EdgeInsets.fromLTRB(cardMargin, 0, cardMargin, cardWidth),
        elevation: 5,
        child: Row(mainAxisSize: MainAxisSize.max, children: <Widget>[
          new Container(
              alignment: Alignment.centerLeft,
              height: cardHeight,
              width: cardWidth / 2,
              child: Image(image: AssetImage("assets/demo.jpg"))),
          new Container(
              alignment: Alignment.centerRight,
              height: cardHeight,
              width: cardWidth / 2,
              child: Padding(
                  padding: EdgeInsets.all(8),
                  child: Column(children: <Widget>[
                    Container(
                        height: cardHeight / 2,
                        child: Column(children: <Widget>[
                          Align(
                              alignment: Alignment.centerLeft,
                              child: Text("Chevrolet Camero 2015",
                                  style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold))),
                          Align(
                              alignment: Alignment.centerLeft,
                              child: Row(children: <Widget>[
                                Padding(
                                    padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
                                    child: Text("121,000",
                                        style: TextStyle(
                                            color: Colors.lightGreen,
                                            fontSize: 16,
                                            fontWeight: FontWeight.bold))),
                                Row(
                                    mainAxisSize: MainAxisSize.max,
                                    children: <Widget>[
                                      Text("AED",
                                          textAlign: TextAlign.left,
                                          style: TextStyle(
                                              color: Colors.lightGreen,
                                              fontSize: 10))
                                    ])
                              ]))
                        ])),
                    Container(
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                          Flexible(
                              flex: 2,
                              child: Column(children: <Widget>[
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text("Lot #",
                                        style: TextStyle(
                                            color: Colors.grey, fontSize: 11))),
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text("123456",
                                        style: TextStyle(
                                            fontSize: 13,
                                            fontWeight: FontWeight.bold)))
                              ])),
                          Flexible(
                              flex: 1,
                              child: Column(children: <Widget>[
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text("Bids",
                                        style: TextStyle(
                                            color: Colors.grey, fontSize: 11))),
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text("37",
                                        style: TextStyle(
                                            fontSize: 13,
                                            fontWeight: FontWeight.bold)))
                              ])),
                          Flexible(
                              flex: 2,
                              child: Column(children: <Widget>[
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text("Time left",
                                        style: TextStyle(
                                            color: Colors.grey, fontSize: 11))),
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text("03:15:32",
                                        style: TextStyle(
                                            fontSize: 13,
                                            fontWeight: FontWeight.bold)))
                              ]))
                        ]))
                  ])))
        ]));

这是主页面:

Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
      new Stack(children: <Widget>[
        new CustomAppBar("Cars & Machinery"),
        new Positioned.fill(
            child: Align(
                alignment: Alignment.bottomCenter, child: new AppBarMenu()))
      ]),
      new Padding(
          padding: EdgeInsets.all(10),
          child: Text("Scroll down to Search",
              style: TextStyle(color: Colors.grey, fontSize: 12))),
     // new CarItem()
      new Expanded(
          child: new ListView.builder(
              itemCount: 2,
              shrinkWrap: true,
              itemBuilder: (BuildContext ctxt, int index) {
                return new CarItem();
              }))
    ]);

我希望卡片在列表中正确显示。

最佳答案

我认为问题出在您为 Card 编写的以下行中:

margin: EdgeInsets.fromLTRB(cardMargin, 0, cardMargin, cardWidth),

第四个参数代表底部边距,因为你给了 cardWidth 的值而不是边距。按照以下检查更新值。:

margin: EdgeInsets.fromLTRB(cardMargin, 0, cardMargin, cardMargin),

关于flutter - 卡片正在 flutter 中占据所有垂直空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56925428/

有关flutter - 卡片正在 flutter 中占据所有垂直空间的更多相关文章

  1. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串? - 2

    我试图获取一个长度在1到10之间的字符串,并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符,然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  2. ruby-on-rails - 跳过状态机方法的所有验证 - 2

    当我的预订模型通过rake任务在状态机上转换时,我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用,我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested

  3. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点? 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者,如果您需要做一些更复杂的事情,有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  4. ruby - 获取模块中定义的所有常量的值 - 2

    我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组,即["apple","boy"]? 最佳答案 为了做到这一点,请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c

  5. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中,我们希望成为我们的rails应用程序中的一等公民的几个类类型起源,这意味着它们应该驻留在应用程序的app文件夹下,它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来,我有点担心应用程序文件夹被这么多目录污染。因此,我想将它们移动到一个子目录/模块中,该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内,目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  6. ruby - 在 Ruby 中,垂直线是什么? - 2

    1.upto(9){|x|printx}为什么这行不通?{printx|x}}y呢? 最佳答案 它用于传递给您的block的参数。即在您的示例中,upto将使用1到9中的每个数字调用您的block,当前值可作为x获得。block参数可以有任何名称,就像方法参数一样。例如1.upto(9){|num|putsnum是有效的。就像一个方法的参数一样,一个block也可以有多个参数。例如hash.each_pair{|key,value|puts"#{key}is#{value}"} 关于ru

  7. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗? - 2

    我完全不是程序员,正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3,但我想知道我是否应该升级到Ruby1.9,因为我真的没有任何升级的“遗留”成本。缺点是什么?我是否会遇到与普通gem的兼容性问题,或者甚至其他我不太了解甚至无法预料的问题? 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem,请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问,您可以在以下位置查看:http://www.railsplugins.or

  8. ruby - 如何遍历 Ruby 中所有正则表达式匹配的字符串? - 2

    我们有一个字符串:“”这个正则表达式://i如何从当前字符串中获取所有匹配项? 最佳答案 "".scan(//)参见scan在ruby​​-docs上 关于ruby-如何遍历Ruby中所有正则表达式匹配的字符串?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/6857852/

  9. ruby-on-rails - 在所有延迟的作业之前 Hook - 2

    是否可以在所有delayed_job任务之前运行一个方法?基本上,我们试图确保每个运行delayed_job的服务器都有我们代码的最新实例,所以我们想运行一个方法来在每个作业运行之前检查它。(我们已经有了“check”方法并在别处使用它。问题只是关于如何从delayed_job中调用它。) 最佳答案 现在有一种官方方法可以通过插件来做到这一点。这篇博文通过示例清楚地描述了如何执行此操作http://www.salsify.com/blog/delayed-jobs-callbacks-and-hooks-in-rails(本文中描述

  10. ruby - 如何捕获 ruby​​ 中的所有异常? - 2

    我们如何捕获或/和处理ruby​​中所有未处理的异常?例如,这样做的动机可能是将某种异常记录到不同的文件或发送电子邮件给系统管理。在Java中我们会做Thread.setDefaultUncaughtExceptionHandler(UncaughtExceptionHandlerex);在Node.js中process.on('uncaughtException',function(error){/*code*/});在PHP中register_shutdown_function('errorHandler');functionerrorHandler(){$error=error_

随机推荐