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.hqwc.cn/news/615072.html

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

相关文章

day05-Elasticsearch01

1.初识elasticsearch 1.1.了解ES 1.1.1.elasticsearch的作用 elasticsearch 是一款非常强大的开源搜索引擎,具备非常多强大功能,可以帮助我们从海量数据中快速找到需要的内容 例如: 在 GitHub 搜索代码在电商网站搜索商品在百度搜索答案在打…

C++——StackQueue

目录 一Stack 1介绍 2接口 3模拟实现 4栈的oj题 二Queue 1介绍 2接口 3模拟实现 三容器适配器 1再谈栈和队列 四优先级队列 1接口 ​编辑 2仿函数 五dequeue的简单介绍 一Stack 1介绍 先来看看库中对栈的介绍: 1. stack是一种容器适配器&#x…

视频号小店究竟有什么秘密,值得商家疯狂入驻,商家必看!

大家好,我是电商花花。 我们都知道视频号和抖音本身都是一个短视频平台,但是随着直播电商的发展,背后的流量推动逐步显露出强大的红利市场和变现机会。 视频号小店流量大和赚钱之外,还非常适合普通人创业。 这也使得越来越多的…

web安全学习笔记【22】——文件上传(1)

WEB攻防-PHP应用&文件上传&函数缺陷&条件竞争&二次渲染&黑白名单&JS绕过 演示案例: PHP-原生态-文件上传-前后端验证PHP-原生态-文件上传-类型文件头验证PHP-原生态-文件上传-后缀黑白名单验证PHP-原生态-文件上传-解析配置&二次渲染…

【QT入门】Qt自定义控件与样式设计之控件提升与自定义控件

【QT入门】Qt自定义控件与样式设计之控件提升与自定义控件 往期回顾 【QT入门】Qt自定义控件与样式设计之QProgressBar用法及qss-CSDN博客 【QT入门】 Qt自定义控件与样式设计之QSlider用法及qss-CSDN博客 【QT入门】Qt自定义控件与样式设计之qss的加载方式-CSDN博客 一、最终…

flutter中鼠标检测事件的应用---主要在于网页端使用

flutter中鼠标检测事件的应用—主要在于网页端使用 鼠标放上去 主要代码 import package:flutter/material.dart;class CustomStack extends StatefulWidget {override_CustomStack createState() > _CustomStack(); }class _CustomStack extends State<CustomStack>…

c++中的内联函数和空指针

在C语言中我们学到了宏和宏函数&#xff0c;宏对于类型没有严格的限制&#xff0c;而且不需要建立栈帧&#xff0c;可以提高运行效率&#xff0c;但是宏不能进行调试&#xff0c;容易出错&#xff0c;而且没有类型检查。 为了补C语言中的坑&#xff0c;c中出现了内联函数inlin…

阿里云优惠券是什么?有什么用?如何领取?

阿里云作为国内领先的云计算服务提供商&#xff0c;为广大用户提供了高效、稳定、安全的云服务。为了帮助用户更好地使用阿里云&#xff0c;降低用户的成本&#xff0c;阿里云推出了优惠券活动。本文将为大家详细介绍阿里云优惠券是什么、有什么用以及如何领取。 一、阿里云优惠…

HTML 入门 ( 一 )

HTML文档创建 首先创建一个txt文本文档 修改文件后缀 HTML标签 标签结构 标签又称为元素,是HTML的基本组成单位分为: 双标签与单标签推荐小写标签名 结构: 双标签示例代码: <marquee> My name is Kvein. </marquee>单标签示例代码: <input>标签的并列与嵌…

测试接口时出现HttpMessageNotReadableException: Required request body is missing

问题 测试接口时出现org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing异常 原因 发送请求时没有传参数 解决办法 第一种方式: 传个参数 第二种方式&#xff1a;给个空的JSON

教你们如何用html+css做出漂亮的表格

这个HTML文档定义了一个简单的网页&#xff0c;主要用于展示一个群聊信息的表格。以下是关于这个表格的详细介绍&#xff1a; 基本结构&#xff1a; 文档以<!DOCTYPE html>开始&#xff0c;这是HTML5的文档类型声明。<html>标签是HTML文档的根元素。<head>部…

QA测试开发工程师面试题满分问答12: 用户上传照片如何设计测试用例并进行测试

针对用户上传照片的功能&#xff0c;以下是一些从 QA 角度设计测试用例的示例&#xff0c;涵盖了前端功能点、后端功能点、缓存、异常处理、资源占用、并发和网络等维度&#xff1a; 前端功能点&#xff1a; a. 用户界面&#xff1a;验证上传照片的用户界面是否易于使用和导航&…