草庐IT

dart - flutter : how to achieve expansion of a customPainter widget in vertical (height) direction

coder 2023-05-10 原文

我使用 customPainter 小部件绘制了一个自定义小部件，但我无法在列小部件中展开它。我看过一个类似的问题here但即使使用 CrossAxisAlignment.stretch 我也遇到了问题。当我使用 Expanded 小部件而不是 Flexible 小部件时，出现编译错误。 如您所见，小部件不关心自定义小部件并在 customPaint 上绘制底部卡片文本。

我要扩展的 CardView 小部件扩展了 CustomPaint，没有子级，所有内容都是使用 Canvas 上的 CustomPainter 在 CustomPainter.paint(canvas, size) 中绘制的。

在 paint(canvas, size) 方法中，当我打印 size.height 时，我得到 0.0，这解释了为什么在小部件上打印文本底部。

小部件代码:

   class CardViewState extends State<CardView> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new Padding(
          padding: new EdgeInsets.all(10.0),
          child: new Text(
            "CARD TOP",
            //widget.card.name,
            style: new TextStyle(
                fontSize: 25.0,
                color: Colors.black,
                fontWeight: FontWeight.bold),
            textAlign: TextAlign.center,
          ),
        ),
        new Flexible(
          child: new CustomPaint(
            painter: new CardPainter(widget.card, widget.numbers),
          ),
        ),
        new Padding(
          padding: new EdgeInsets.all(20.0),
          child: new Text(
            "CARD BOTTOM",
            style: new TextStyle(
                fontSize: 25.0,
                color: Colors.black,
                fontWeight: FontWeight.bold),
            textAlign: TextAlign.center,
          ),
        ),
      ],
    );
  }
}

result looks like this

我还需要改变什么来实现高度扩展？

谢谢

最佳答案

CustomPaint 采用其子项的大小(如果有的话)。因为你没有，你得到的高度为零。如果您对 CustomPaint 填充两个填充文本之间的空间感到满意，请使用 Expanded 而不是 Flexible。

看起来您的宾果卡在固定高度下看起来最好，在这种情况下，您可以使用 SizedBox 仅将高度作为父级。

关于dart - flutter : how to achieve expansion of a customPainter widget in vertical (height) direction，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50547615/

customPainterexpansioncode部件sectiondartflutter

有关dart - flutter : how to achieve expansion of a customPainter widget in vertical (height) direction的更多相关文章

  1. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  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. ruby-on-rails - wicked_pdf : footer height/styling - 2

    我正在使用很棒的wicked_pdfgem生成PDF，但我不知道如何更改页脚中的某些样式。我有一个用于页脚的HAML模板，大致如下所示:!!!%html%head%meta{:charset=>"utf-8"}=wicked_pdf_stylesheet_link_tag"pdf"%body.footer%pLine1%pLine2%pLine3还有一些样式:.footer{padding-top:1em;border-top:1pxsolid#ccc;}样式应用得很好，但由于页脚高度较小，只有第一行可见。我试过通过CSS设置高度，但到目前为止还没有。如果我使用例如center、att

  4. ruby-on-rails - Gmaps4rails : Setting map width and height - 2

    阅读gmaps4railsgem文档，我没有找到任何设置map宽度和高度的方法。有什么办法可以做到这一点吗？ 最佳答案 我应该提供有关此的更多详细信息。我将执行安装rake任务以在Rails应用程序中复制css和javascript。好吧，现在，只需在您的css中覆盖它(我假设您没有更改mapID)。#gmaps4rails_map{width:800px;height:400px;}如果你想让它工作，请注意在yield(:head)之后包含你的css 关于ruby-on-rails-G

  5. javascript - 选择多个元素 height(); - 2

    我只是想知道为什么这个jQuery不能工作:hdr=$('.header-wrapper,#top-bar,#new-showroom-header').height();如您所见，我正在尝试获取多个元素的高度并将它们全部存储在我的变量中。我希望jQuery将所有元素的高度加在一起以创建最终值，但是当我console.log变量hdr时，我得到了所选第一个元素的高度。知道如何全选并将它们存储到我的var中吗？ 最佳答案 使用$.each()得到高度的总和。varhdr=0;$('.header-wrapper,#top-bar,#n

  6. javascript - [Vue 警告] : Failed to resolve directive: bin - 2

    我是VueJS的新手。您好，尽管我的应用程序正在运行，但我在控制台中收到此错误，该错误阻止了jQuery。v-for="messageinmessages"遍历对象并尝试显示对象。但收到此错误Vuewarn]:Failedtoresolvedirective:bin@{{message.fileName}}@{{message.sentAt}}@{{message.content}}@{{message.sentAt}}实际上这是一个laravelblade所以不用担心@符号 最佳答案 我在添加v-bind指令后遇到了同样的错误。结

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

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

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

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

  9. javascript - Mapbox gl & directions API 调用 - 不显示路线 - 2

    我有一个带有多个标记的应用程序，用于显示旅行。每个标记都是一个步骤，我想在每个标记之间创建一条路线，它跟随标记(后续步骤)。为此，现在我有这段代码:$(document).ready(function(){varmap;vardirections;//tokenaccessforMAPBOXGLmapboxgl.accessToken='pk.eyJ1IjoiYW50b3RvIiwiYSI6ImNpdm15YmNwNTAwMDUyb3FwbzlzeWluZHcifQ.r44fcNU5pnX3-mYYM495Fw';//generatemapvarmap=newmapboxgl.Map(

  10. javascript - Angular Directive(指令) : Allow just numbers - 2

    这里是asampleangulardirectivetopreventtypingnon-numerickeys(StackOverflowanswer).我想写类似thisfiddle的东西在多个输入中使用is-number指令。请注意，由于我的输入中有各种不同的指令，因此我不能使用上述答案更新中建议的相同模板。var$scope;varapp=angular.module('myapp',[]);app.controller('Ctrl',function($scope){$scope.myNnumber1=1;$scope.myNnumber2=1;});app.directiv

随机推荐