草庐IT

Flutter:将小部件的边缘与第二个小部件重叠

coder 2023-07-22 原文

我想将一个小部件的底部边缘与另一个小部件重叠，使其看起来像这样:

我正在使用堆栈将箭头按钮定位在卡片上。目前，我只是将位置设置为上方有一个不可见的框。问题是此方法仅适用于该精确分辨率 - 它应该与屏幕尺寸无关。

小部件的必要代码:

Stack(
 children: <Widget>[
  Container( //background
   height: 100,
   width: 100,
  ),
  FloatingActionButton(
   child: Icon(Icons.arrow_forward),
   onPressed: () {},
  )
 ],
)

最佳答案

更新 - 2021 年 4 月

您不能再在 Stack 小部件中使用 overflow 属性，因为它已被弃用。请改用 clipBehaviour。来源:Flutter docs

您可以使用 Stack 和 Positioned 小部件来实现此 UI。

Stack(
  clipBehavior: Clip.none,
  children: <Widget>[
    Container(
      color: Colors.amber,
      height: 150,
      width: 150,
    ),
    Positioned(
      child: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          print('FAB tapped!');
        },
        backgroundColor: Colors.blueGrey,
      ),
      right: 0,
      left: 0,
      bottom: -26,
    ),
  ],
),

输出:

更新 - 2022 年 3 月

The Area which is outside of Stack won't be clickable due to the platform limitation, and that is how the Stack widget works.

You can learn more about the same in this issue.

关于Flutter:将小部件的边缘与第二个小部件重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57091493/

部件Fluttercodesection

有关Flutter:将小部件的边缘与第二个小部件重叠的更多相关文章

  1. ruby - 如何跳过 CSV 文件的第一行并将第二行作为标题 - 2

    有没有办法跳过CSV文件的第一行，让第二行作为标题？我有一个CSV文件，第一行是日期，第二行是标题，所以我需要能够在遍历它时跳过第一行。我尝试使用slice但它会将CSV转换为数组，我真的很想将其读取为CSV，以便我可以利用header。 最佳答案 根据您的数据，您可以使用另一种方法和skip_lines-option此示例跳过所有以#开头的行require'csv'CSV.parse(DATA.read,:col_sep=>';',:headers=>true,:skip_lines=>/^#/#Markcomments!)do|

  2. ruby - 查找重叠的正则表达式匹配项 - 2

    我想找到给定字符串中的所有匹配项，包括重叠匹配项。我怎样才能实现它？#Example"a-b-c-d".???(/\w-\w/)#=>["a-b","b-c","c-d"]expected#Solutionwithoutoverlappedresults"a-b-c-d".scan(/\w-\w/)#=>["a-b","c-d"],but"b-c"ismissing 最佳答案 在积极的前瞻中使用捕获:"a-b-c-d".scan(/(?=(\w-\w))/).flatten#=>["a-b","b-c","c-d"]参见Rubyde

  3. ruby - 确定字符串的结尾是否与单独的字符串的开头重叠 - 2

    我想查找字符串的结尾是否与单独字符串的开头重叠。例如，如果我有这两个字符串:string_1='Peoplesaynothingisimpossible,butI'string_2='butIdonothingeveryday.'如何找到string_1末尾的“butI”部分与string_2开头相同？我可以编写一个方法来遍历这两个字符串，但我希望得到一个包含我错过的Ruby字符串方法或Ruby习惯用法的答案。 最佳答案 将MARKER设置为一些从未出现在您的string_1和string_2中的字符串。有一些方法可以动态地做到这一

  4. ruby - 检查 ruby 中的两个范围是否重叠 - 2

    我知道我能做到:(1..30).cover?(2)=>true但是当我尝试对另一个范围执行相同操作时，它总是返回false:(1..30).cover?(2..3)=>false所以我的问题是-是否有任何优雅的方法来比较ruby​​中的两个范围？在我的例子中，我想检查两个日期时间范围是否重叠。提前致谢。 最佳答案 给定范围A的两个范围重叠，当:范围B从范围A开始，范围B在范围A内结束或范围B在范围A之前开始，在范围A之后结束例子:RangeA|-----||-----|Case1|-----|Case2|-|Case1+2|----

  5. ruby - `respond_to_missing?` 的第二个参数有什么用吗？ - 2

    使用method_missing时在Ruby中，它是almostalwaysagoodidea定义respond_to_missing?respond_to_missing?接受两个参数；我们正在检查的方法的名称(symbol)，以及一个指示我们是否应该在检查中包含私有(private)方法的bool值(include_all)。现在我感到困惑的是:method_missing不接受任何可能指示它是否应该调用私有(private)方法的参数，如respond_to_missing?做。此外，method_missing无论原始方法调用是在公共(public)上下文还是私有(privat

  6. ruby - stub 实例方法在使用 minitest 的第二次调用时返回值不同 - 2

    我正在对用户的提要进行分页，并想模拟我正在使用的API的响应。API可以返回奇怪的结果，所以我想确保如果API返回我已经看到的项目，请停止分页。我使用minitest在第一次调用方法get_next_page时stub，但我想在第二次和第三次用不同的值调用它时stub。我应该只使用rSpec吗？ruby新手...这是片段test"crawlerdoesnotpaginateifnonewitemsinnextpage"do#1:A,B#2:B,D=>D#3:A=>stopcrawler=CrawlJob.newfirst_page=[{"id"=>"item-A"},{"id"=>"i

  7. ruby &&= 边缘案例 - 2

    有点边缘情况，但知道为什么&&=会这样吗？我正在使用1.9.2。obj=Object.newobj.instance_eval{@bar&&=@bar}#=>nil,expectedobj.instance_variables#=>[],soobjhasno@barinstancevariableobj.instance_eval{@bar=@bar&&@bar}#ostensiblythesameas@bar&&=@barobj.instance_variables#=>[:@bar]#whywouldthisversioninitialize@bar?为了比较，||=将实例变量初始

  8. ruby-on-rails - Ruby:给定日期找到下一个第二或第四个星期二 - 2

    我似乎找不到一种优雅的方式来做到这一点......给定一个日期，我如何找到下一个星期二，即日历月的第2个或第4个星期二？例如:给定2012-10-19然后返回2012-10-23或给定2012-10-31然后返回2012-11-13OctoberNovemberSuMoTuWeThFrSaSuMoTuWeThFrSa12345612378910111213456789101415161718192011121314151617212223242526271819202122232428293031252627282930 最佳答案

  9. ruby - 为什么触发器运算符包含第二个条件？ - 2

    以下代码使用了触发器运算符。(1..10).each{|x|print"#{x},"ifx==3..x==5}为什么结果是3,4,5？我觉得应该是3,4。如教程中所述，此表达式在x==3时为真，并一直为真，直到x==5。如果“5”的计算结果为false，如何打印它？谁能为我澄清一下？ 最佳答案 来自“TheRubyProgrammingLanguage”的重要链接是:4.6.9.1Booleanflip-flopsWhenthe..and...operatorsareusedinaconditional,suchasanifstat

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

随机推荐