Flutter第九弹 构建列表元素间距

目标:

1)Flutter Widget组件之间间距怎么表示?

2)列表怎么定义子项之间间距?

一、间距的表示组件

列表组件的间距一般采用固定间距,间距占据可见的空间。

已经使用的表示间距的组件

Spacer:调整小部件之间的间距

Expanded:扩展组件以充满空间

但是它们需要指定高度约束。

在列表中添加间距,使用LayoutBuilder和ConstrainedBox在空间足够时均匀地分隔列表项,并允许用户在空间不足时滚动,具体步骤如下:

  1. Add a LayoutBuilder with a SingleChildScrollView.
  2. Add a ConstrainedBox inside the SingleChildScrollView.
  3. Create a Column with spaced items.

二、创建带有SingleChildScrollView的LayoutBuilder

开始创建一个Layout Builder,需要提供一个builder 回调,

带有两个参数:

1. BuilderContext, 由Layout Builder提供

2. 父Widget 的 BoxConstraints

LayoutBuilder(builder: (context, constraints) {return SingleChildScrollView(child: Placeholder(),);
});

三、添加一个ConstrainedBox到SingleChildScrollView内部

ConstraintdBox小部件向其子部件施加额外的约束。

通过将minHeight参数设置为LayoutBuilder约束的maxHeight来配置约束。

这样可以确保子窗口小部件的最小高度等于LayoutBuilder约束提供的可用空间,即BoxConstraints的最大高度。

LayoutBuilder(builder: (context, constraints) {return SingleChildScrollView(child: ConstrainedBox(constraints: BoxConstraints(minHeight: constraints.maxHeight),child: Placeholder(),),);
});

但是,您没有设置maxHeight参数,因为您需要允许子项大于LayoutBuilder的大小,以防项目不适合屏幕。

四、创建带间距的Column

最后,添加一个Column作为ConstraintdBox的子级。
要均匀地分配项目的空间,请将mainAxisAlignment设置为mainAxisAlignment.spaceBetween。

import 'package:flutter/material.dart';void main() => runApp(const SpacedItemsList());class SpacedItemsList extends StatelessWidget {const SpacedItemsList({super.key});@overrideWidget build(BuildContext context) {const items = 4;return MaterialApp(title: 'Flutter Demo',debugShowCheckedModeBanner: false,theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),cardTheme: CardTheme(color: Colors.blue.shade50),useMaterial3: true,),home: Scaffold(body: LayoutBuilder(builder: (context, constraints) {return SingleChildScrollView(child: ConstrainedBox(constraints: BoxConstraints(minHeight: constraints.maxHeight),child: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.stretch,children: List.generate(items, (index) => ItemWidget(text: 'Item $index')),),),);}),),);}
}class ItemWidget extends StatelessWidget {const ItemWidget({super.key,required this.text,});final String text;@overrideWidget build(BuildContext context) {return Card(child: SizedBox(height: 100,child: Center(child: Text(text)),),);}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/307146.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VUE_H5页面跳转第三方地图导航,兼容微信浏览器

当前项目是uniapp项目,若不是需要替换uni.showActionSheet选择api onMap(address , organName , longitude 0, latitude 0){var ua navigator.userAgent.toLowerCase();var isWeixin ua.indexOf(micromessenger) ! -1;if(isWeixin) {const mapUrl_tx "…

TripoSR: Fast 3D Object Reconstruction from a Single Image 论文阅读

1 Abstract TripoSR的核心是一个基于变换器的架构,专为单图像3D重建设计。它接受单张RGB图像作为输入,并输出图像中物体的3D表示。TripoSR的核心包括:图像编码器、图像到三平面解码器和基于三平面的神经辐射场(NeRF)。…

C语言进阶课程学习记录-数组指针和指针数组分析

C语言进阶课程学习记录-数组指针和指针数组分析 实验-数组指针的大小实验-指针数组小结 本文学习自狄泰软件学院 唐佐林老师的 C语言进阶课程&#xff0c;图片全部来源于课程PPT&#xff0c;仅用于个人学习记录 实验-数组指针的大小 #include <stdio.h>typedef int(AINT…

js解密心得,记录一次抓包vue解密过程

背景 有个抓包结果被加密了 1、寻找入口&#xff0c;打断点 先正常请求一次&#xff0c;找到需要的请求接口。 寻找入口&#xff0c;需要重点关注几个关键字&#xff1a;new Promise 、new XMLHttpRequest、onreadystatechange、.interceptors.response.use、.interceptors.r…

蓝桥杯python速成

总写C&#xff0c;脑子一热&#xff0c;报了个Python&#xff08;有一点想锤死自己&#xff09;&#xff0c;临时抱佛脚了 1.list的插入删除 append extend insert&#xff08;在索引位插入99&#xff09;---忘记用法别慌&#xff0c;用help查询 remove&#xff08;去掉第一个3…

Spring Boot 学习(4)——开发环境升级与项目 jdk 升级

各种版本都比较老&#xff0c;用起来也是常出各样的问题&#xff0c;终于找到一个看来不错的新教程&#xff0c;是原先那个教程的升级。遂决定升级一下开发环境&#xff0c;在升级遇到一些问题&#xff0c;摸索将其解决&#xff0c;得些体会记录备查。 最终确定开发环境约束如下…

基于单片机的智能居家火灾报警系统

摘要:采用STC15L2K32单片机设计了一种智能火灾报警系统,它是控制中心与多个不同功能的探测模块构成,实现了一个中心、多点辐射的火灾检测和报警功能。 关键词:智能居家,火灾报警系统,单片机,模块化设计。 0 引言 近些年电子技术、计算机技术为火灾报警系统和灭火系统在…

搭建Maven的Nexus3私服

搭建Maven的Nexus3私服 1、常见的Maven私服产品 Apache的ArchivaJFrog的ArtifactorySonatype的Nexus&#xff08;[ˈneksəs]&#xff09;&#xff08;当前最流行、使用最广泛&#xff09; 2. windows java8安装和配置私服Nexus3 参考&#xff1a; https://zhuanlan.zhihu…

Idea中 maven 下载jar出现证书问题

目录 1&#xff1a; 具体错误&#xff1a; 2&#xff1a; 忽略证书代码&#xff1a; 3&#xff1a; 关闭所有idea&#xff0c; 清除缓存&#xff0c; 在下面添加如上忽略证书代码 4&#xff1a;执行 maven clean 然后刷刷新依赖 完成&#xff0c;撒花&#xff01;&#x…

uni-app web端使用getUserMedia,摄像头拍照

<template><view><video id"video"></video></view> </template> 摄像头显示在video标签上 var opts {audio: false,video: true }navigator.mediaDevices.getUserMedia(opts).then((stream)> {video document.querySelec…

小程序 SSL证书的重要性与选择

随着移动互联网的迅猛发展&#xff0c;微信小程序已成为众多企业和开发者连接用户的重要平台。然而&#xff0c;随之而来的是对数据安全和隐私保护的严峻挑战。在这一背景下&#xff0c;小程序SSL证书的作用变得尤为重要&#xff0c;它为小程序提供了一个安全的通信管道&#x…

【linux深入剖析】动态库的使用(续) | 动静态库的链接

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 回顾1. 打包库的使用2. 动…

redis-缓存穿透与雪崩

一&#xff0c;缓存穿透&#xff08;查不到&#xff09; 在默认情况下&#xff0c;用户请求数据时&#xff0c;会先在缓存(Redis)中查找&#xff0c;若没找到即缓存未命中&#xff0c;再在数据库中进行查找&#xff0c;数量少可能问题不大&#xff0c;可是一旦大量的请求数据&a…

IDM激活步骤-亲测可用

前言&#xff1a;我试了3种方法&#xff0c;仅以下方法激活成功&#xff0c;其他都是30天试用 使用步骤&#xff1a; 1.从官网下载IDM并安装&#xff1a;https://www.internetdownloadmanager.com/ 2.下载激活工具&#xff1a;https://wwif.lanzouw.com/iSY2N16s81xi &#…

【NLP练习】调用Gensim库训练Word2Vec模型

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、准备工作 1.安装Gensim库 使用pip安装&#xff1a; !pip install gensim2. 对原始语料分词 选择《人民的民义》的小说原文作为语料&#xff0c;先采用…

Composer安装与配置

Composer&#xff0c;作为PHP的依赖管理工具&#xff0c;极大地简化了PHP项目中第三方库的安装、更新与管理过程。本文将详细介绍Composer的安装步骤、基本配置方法&#xff0c;以及一些实用的操作示例&#xff0c;帮助读者快速上手并熟练运用Composer。 一、Composer安装 环…

性能优化-02

uptime 依次显示当前时间、系统运行时间以及正在登录用户数&#xff0c;最后三个数字依次则是过去1分钟、5 分钟、15 分钟的平均负载(Load Average) 平均负载是指单位时间内&#xff0c;系统处于可运行状态和不可中断状态的平均进程数&#xff0c;也就是平均活跃进程数&#xf…

R语言绘图:绘制横向柱状图

代码主要实现&#xff1a; 对数据进行排序&#xff0c;并且相同分组的数据会有相同的颜色。最后&#xff0c;绘制横向柱状图。 # 加载ggplot2包 library(ggplot2)# 示例数据&#xff0c;假设有三列&#xff1a;Group, Variable, Value data <- data.frame(Group factor(c(…

探索HTTP协议的世界 | 从基础到高级应用,原理与实践相结合(请求篇)

从基础到高级应用&#xff0c;原理与实践相结合 什么是Http历代Http协议主要特点格式和URL协议内容请求行格式如下请求方法简单案例 消息报头报头域的格式HTTP消息报头类型普通报头优化方向报头&#xff08;缓存&#xff09;Cache-Control的选项其他相关的缓存报头 请求报头Acc…

无惧烈日!看小米SU7的防晒杀手锏

小米SU7&#xff0c;为颜值设计&#xff0c;更为体验设计。 其中&#xff0c;女性车主占比近30%&#xff0c;算上给太太/女朋友、姐姐、妹妹等亲友买的&#xff0c;实际女车主预计占比是40%甚至50%。 为啥呢&#xff1f;因为小米SU7好看、防晒、收纳&#xff0c;丰富优雅。 小米…