草庐IT

Flutter 卡片颜色

coder 2023-07-23 原文

我想把这张卡片分成几列(展开的小部件),我面临的问题是:我无法将颜色容器(右列的父级)设置为全高,所以只有一部分显示彩色背景。

我有什么:

我想要什么:

  • 我尝试了 Flutter Inspector 工具并注意到 Container 及其子 Column 没有达到全高(即使在输入 mainAxisSize: MainAxisSize.max 之后)

  • 我也尝试使用 FractionSized 而不是使用 Expanded.. 但运气不好。

代码:

    import 'package:flutter/material.dart';

    class SubjectPage extends StatelessWidget {
      final String dayStr;
      SubjectPage(this.dayStr);

      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 0),
          child: Column(
            children: <Widget>[
              Card(
                child: Row(
                  children: <Widget>[
                    // Column 1
                    Expanded(
                      flex: 7,
                      child: Padding(
                        padding: EdgeInsets.all(20.0),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            getTitle("UEC607"),
                            getSubName("Data Communication & Protocol"),
                            getVenue("E-204"),
                          ],
                        ),
                      ),
                    ),
                    // Column 2
                    // The Place where I am Stuck//
                    Expanded(
                      flex: 3,
                      child: Container(
                        color: Colors.blue,
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            getType("L"),
                            getTime("9:00"),
                          ],
                        ),
                      ),
                    )
                  // COlumn 2 End
                  ],
                ),
              )
            ],
          ),
        );
      }

      // Get Title Widget
      Widget getTitle(String title) {
        return Padding(
          padding: EdgeInsets.only(bottom: 8.0),
          child: Text(title),
        );
      }

      // Get Subject Name
      Widget getSubName(String subName) {
        return Padding(
          padding: EdgeInsets.only(bottom: 25.0),
          child: Text(subName),
        );
      }

      // Get Venue Name
      Widget getVenue(String venue) {
        return Padding(
          padding: EdgeInsets.only(bottom: 0.0),
          child: Text(venue),
        );
      }

      Widget getType(String type) {
        return Padding(
          padding: EdgeInsets.only(bottom: 10.0),
          child: Text(type),
        );
      }

      Color getColor(String type) {
        if (type == "L") {
          return Color(0xff74B1E9);
        }
      }

      Widget getTime(String time) {
        return Text(time);
      }
    }

最佳答案

设置容器高度

Expanded(
                      flex: 3,
                      child: Container(
                        height: double.infinity,
                        color: Colors.blue,
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            getType("L"),
                            getTime("9:00"),
                          ],
                        ),
                      ),
                    )

关于Flutter 卡片颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57221885/

有关Flutter 卡片颜色的更多相关文章

  1. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem,所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  2. ruby 诅咒颜色 - 2

    如何使用Ruby的默认Curses库获取颜色?所以像这样:puts"\e[0m\e[30;47mtest\e[0m"效果很好。在浅灰色背景上呈现漂亮的黑色。但是这个:#!/usr/bin/envrubyrequire'curses'Curses.noecho#donotshowtypedkeysCurses.init_screenCurses.stdscr.keypad(true)#enablearrowkeys(forpageup/down)Curses.stdscr.nodelay=1Curses.clearCurses.setpos(0,0)Curses.addstr"Hello

  3. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序,其中需要一个可供用户选择颜色的字段,该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”,并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中,因此使用基

  4. ruby - 如何使用 Ruby 基于字母数字字符串生成颜色? - 2

    我想要像“嘿那里”这样的东西变成,例如,#316583。我希望将任意长度的字符串“归结”为十六进制颜色。我不知道从哪里开始。我在想,每个字符串的MD5散列都是不同的-但如何将该散列转换为十六进制颜色数字? 最佳答案 你可以只取几位前几位:require'digest/md5'color=Digest::MD5.hexdigest('Mytext')[0..5] 关于ruby-如何使用Ruby基于字母数字字符串生成颜色?,我们在StackOverflow上找到一个类似的问题:

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

  6. ruby - 256 种颜色,前景和背景 - 2

    这是两个脚本的故事,与previousquestion有关.这两个脚本位于http://gist.github.com/50692.ansi.rb脚本在所有256种背景颜色上显示所有256种颜色。ncurses.rb脚本显示所有256种前景颜色,但背景显示基本的16种颜色,然后似乎循环显示各种属性,如闪烁和反向视频。那么是什么给了?这是ncurses中的错误,它使用带符号的整数来表示颜色对吗?(即'tputcolors'表示256但'tputpairs'表示32767而不是65536)似乎如果是这种情况,颜色对的前半部分会正确显示但后半部分会重复或进入属性作为int包裹。

  7. ruby - RSpec Git Bash Windows——缺少颜色? - 2

    我在Windows上使用GitBash来完成我的大部分Rails工作,每次我运行bundleexecrspecspec它都会提醒我“你必须geminstallwin32console才能使用Windows上的颜色”,然后以纯黑色和白色运行RSpec。但是我确实安装了win32console,当我在列表中运行gemlist时,它有win32console(1.3.0x86-mingw32)。RSpec工作正常,但我希望它有一些颜色。我用谷歌搜索了这个并找到了多种解决方案,但似乎没有一个适合我。有人可以写出在GitBashforWindows上使用RSpec获取颜色的“循序渐进”方法吗?

  8. Ruby popen3 和 ANSI 颜色 - 2

    我正在尝试让watchr在文件更改时自动运行测试,并且得到了我需要工作的大部分内容,除了RSpec中的所有ANSI颜色都被忽略了这一事实。违规代码如下:stdin,stdout,stderr=Open3.popen3(cmd)stdout.each_linedo|line|last_output=lineputslineend当cmd等于rspecspec/**/*.rb时,上面的代码可以正常运行RSpec,除了所有输出都是单色的。我看过使用Kernel.system代替,但是系统不返回我需要确定测试是否失败/成功的输出。如何获取从Ruby中执行的脚本的输出(包括ANSI颜色)并将其输

  9. ruby - 如何修改图像的颜色以消除活力? - 2

    我如何改变颜色:进入这个:我使用Gimp生成输出图像,输入图像作为第一层,图像的背景色作为第二层,在图层面板中我选择模式“颜色”我想保留背景色,但希望颜色为棕色。有没有用ChunkyPNG做这个的想法?或者我应该将ImageMagick与颜色查找表一起使用吗? 最佳答案 感谢您的想法。我发现Linuxios中的那个最有帮助Gimplayermodesrequire"json"require"httpclient"require"chunky_png"moduleChunkyPNG::Colordefh(value)r,g,b=r(v

  10. ruby - 为什么我的带有 ANSI 颜色代码的 IRB 提示通过复制/粘贴弄乱了翻页/翻页行为? - 2

    我添加到我的.irbrc:IRB.conf[:PROMPT].reverse_merge!(:RAILS_ENV=>{:PROMPT_I=>"#{current_app}#{rails_env}#{prompt}",:PROMPT_N=>"#{current_app}#{rails_env}#{prompt}",:PROMPT_S=>nil,:PROMPT_C=>"?>",:RETURN=>"=>%s\n"})IRB.conf[:PROMPT_MODE]=:RAILS_ENV如果我这样做:current_app="\e[31mfoo_bar_app\e[0m"rails_env="\e

随机推荐