flutter 的卡片堆

coder 2023-07-23 原文

我试图创建一堆卡片，相互叠加和偏移以可视化一张卡片的多个版本。

我曾尝试将卡片放入卡片中，但没有找到抵消它们的方法。我也尝试过使用堆栈类，但没有成功。

有人知道我怎样才能达到这种效果吗？

最佳答案

您使用 Stack 的方向是正确的 - 您只需要弄清楚如何偏移小部件。对堆栈的“顶部”执行此操作的最佳方法是使用填充，但您不想指定每张卡片的大小......如果堆栈根据以下内容增长/缩小会更好实际显示的内容。

为此，您可以将 Positioned 与为卡片指定的所有尺寸一起使用。这将确保它们增长到适当的大小，而无需调整堆栈大小或不必指定它们的每个大小。

代码如下:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Container(
          color: Colors.grey,
          child: ListView(
            children: [
              StackOfCards(
                child: Container(height: 100.0),
                num: 5,
              ),
              StackOfCards(
                child: Container(height: 100.0),
                num: 4,
              ),
              StackOfCards(
                child: Container(height: 100.0),
                num: 3,
              ),
              StackOfCards(
                child: Container(height: 100.0),
                num: 2,
              ),
              StackOfCards(
                child: Container(height: 100.0),
                num: 1,
              )
            \],
          ),
        ),
      ),
    );
  }
}

class StackOfCards extends StatelessWidget {
  final int num;
  final Widget child;
  final double offset;

  const StackOfCards({Key key, int num = 1, @required this.child, this.offset = 10.0})
      : this.num = num > 0 ? num : 1,
        assert(offset != null),
        super(key: key);

  @override
  Widget build(BuildContext context) => Stack(
        children: List<Widget>.generate(
            num - 1,
            (val) => Positioned(
                bottom: val * offset,
                left: val * offset,
                top: (num - val - 1) * offset,
                right: (num - val - 1) * offset,
                child: Card(child: Container()))).toList()
          ..add(
            Padding(
              child: Card(child: child),
              padding: EdgeInsets.only(bottom: (num - 1) * offset, left: (num - 1) * offset),
            ),
          ),
      );
}

嗯……我猜构建函数可能需要稍微解释一下。我正在做的是使用生成的列表从 0..(num cards - 1) 开始迭代并为每个 Positioned 小部件计算适当的偏移量(每个小部件都包含一个基本为空的卡片)。

然后使用 .toList() 从一个可迭代对象生成一个列表，但是还没有最上面的卡片...所以我做了一个内联添加(我确定有一个更好的词，但我不知道)具有适当偏移量并包含子项的 Padding 小部件。 ..add 只是让我可以在一行中完成它 - 它返回列表而不是像 .add 那样返回 void。耶飞镖 =)!

我让它有点灵活，但你可以更进一步，将偏移量定义为两个参数，这样你就可以去不同的方向等。无论如何，代码结果如下:

关于 flutter 的卡片堆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51186478/

的卡 flutter child num StackOfCards flutter-layout

有关flutter 的卡片堆的更多相关文章

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 变量
华为OD机试 - 卡片组成的最大数字（C 语言解题）【独家】 - 2
最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理已参加机试人员的实战技巧文章目录使用说明本期题目：卡片组成的最大数字题目输入输出描述示例一输入输出示例二输入输出Code
Javascript 将图像排列成一堆卡片 - 2
我是javascript的新手，所以我确信我对它的理解有很多缺失。我正在尝试做的是创建一层图像，使其看起来像一堆卡片。看过类似的代码并尝试遵循他们的想法，但我就是无法正确定位图像。所有10张左右的图像都放在完全相同的位置。能帮忙看看为什么不定位吗？还有什么是“em”。我找不到任何关于它的文献，但假设它是像px这样的测量em??为什么在""中？functionDisplay(){varel;varleft=0;vartop=0;vari=0;varn=deck.length;varcardNode;varimg=document.createElement("IMG");img.src=
javascript - 从 Trello 获取所有卡片和商店详细信息 - 2
我正在尝试编写一些简单的Javascript，它使用TrelloAPI从我的帐户中获取所有看板/列表/卡片，并将它们添加到可排序的表格中(使用Datatablesjquery插件)。到目前为止，我已经设法编写了一个jsfiddle来获取所有这些信息并将其写入页面，但我不知道如何将所有这些信息存储到某种数据结构中，然后可以将其传递给数据表插件。这是我到目前为止从Trello获取数据的fiddle:JSFiddleLinkvarcarddata=[];Trello.members.get("me",function(member){$("#fullName").text(member.fu
flutter 中最详细的继承，多态，接口讲解 - 2
flutter中最详细的继承，多态，接口讲解前言一、继承（Extends）二、混合mixins（with）2.1、最简单的mixin2.2、on关键字，基于某个类型的mixin2.3、多个mixin2.4、mixin怎么实现多继承三、接口的实现（implement）总结前言众所周知，dart是一门单继承的语言，但是我们在日常开发中，会遇到各种各样的问题，比如，我们需要在dart中实现多继承，那么改怎么办呢？本篇文章，我将和大家聊聊关于dart中的继承，接口，混合的相关知识。类型解决什么问题使用场景限制extends子类继承子类继承父类只能继承一个父类，会继承父类的可见的属性和方法，不能继承构造
go - 无法从 Stripe 获取卡片品牌 - 2
func(s*Service)CreateNewCreditCard(user*models.User,creditCardRequest*CreditCardRequest)(error){userID:=string(user.ID)customer,err:=s.stripe_a.CreateUserID(creditCardRequest.StripeToken,userID)iferr!=nil{returnerr}//TODO-NOTBEINGFILLEDWITHDATA-->thisneedstobeaddedtothebrandcolominthedatabase//c
java - recyclerview android 中的 2-vertical 和 2-horizontal 卡片 View - 2
我想用一个数据集列表创建以下UI。我尝试使用多种View类型，但无法达到我的要求。我也实现了这个博客AndroidHorizontalandVerticalRecyclerViewExample.但是这里使用了两个recyclerviews，并且有两组数据(水平数据和垂直数据)。我也试过这个。RecyclerViewwithmultipleviewsusingcustomadapterinAndroid但这是在XML中使用静态卡片View并将它们加载到适配器中。我是Android开发的初学者。请帮忙!提前谢谢你。最佳答案你想要的
java - 自定义卡片 View 形状 - 2
我有一个卡片项目的想法。但我不知道什么是最好的实现方式。我无法想象，如何用xml来做到这一点(如何切掉那半个圆圈？)，或者如何用canvas来做到这一点？扩展卡片View并重新定义背景还是？最佳答案这应该让您走上正确的道路:http://developer.android.com/tools/help/draw9patch.html它允许您定义自定义图像的拉伸(stretch)方式。我建议您使用将9patch图像设置为背景的对话框或自定义View。如果自定义View是相对布局，那么您可以将TextView置于相对布局的中心。或者
Flutter实现文件上传华为对象存储(OBS) - 2
本文主要讲述在Flutter项目中如何实现将文件上传到华为OBS（对象存储）中，并封装为三方库方便灵活使用。背景介绍在大多项目中都会存在文件上传的需求，之前的实现都是调用后台的文件上传接口将文件上传到服务器上，但是这样会存在一个问题，因为文件上传会占用带宽导致在文件上传中调用其他接口的时候就会存在访问慢的情况，解决方案当然是升级带宽或者单独使用一台服务器作为文件服务，而且要带宽足够大不然上传下载的时候会很慢，但是这样两种方案成本都比较高。随着云计算的到来，各大云服务商都提供了对象存储的服务，费用便宜、带宽高、不影响业务系统而且提供了很多附加功能，比如图片处理、图片鉴黄等功能。因目前
Flutter项目 - 2
一、项目简介本节的学习目标是通过Flutter技术，实现仿拉勾教育App的效果。其主要的UI效果如下:二、初始化项目初始化项目fluttercreateflutter_project修改文件flutter项目/android/build.gradle，把google()和jcenter()这两行去掉。改为阿里的镜像地址。//google()//jcenter()maven{url'https://maven.aliyun.com/repository/google'}maven{url'https://maven.aliyun.com/repository/jcenter'}maven{url

flutter 的卡片堆

有关flutter 的卡片堆的更多相关文章

随机推荐