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

ops/2024/10/22 14:29:37/

目标:

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.ppmy.cn/ops/7433.html

相关文章

uniapp 页面跳转通信上下级页面互传

第一种 //A页面跳转方法 xx(){uni.navigateTo({url: ./olylis-cascader/demo}); }, //A页面 用来回去B页面返回数据的方法 getValue(list){console.log(list,B页面传递的数据) } ---------------------------------------------------------- B页面 submit(){let pages getCu…

Flink学习(七)-单词统计

前言 Flink是流批一体的框架。因此既可以处理以流的方式处理,也可以按批次处理。 一、代码基础格式 //1st 设置执行环境 xxxEnvironment env xxxEnvironment.getEnvironment;//2nd 设置流 DataSource xxxDSenv.xxxx();//3rd 设置转换 Xxx transformation xxxDS.…

JDK8开始新增的日期和时间

1、为什么要用JDK8开始新增的时间表: 传统的时间类(Date,simpleDateFormat,Calender)存在如下问题: ①设计不合理,使用不方便,很多都被淘汰了 ②都是可变对象,修改后会…

解决程序化刷新EXCEL提示更新外部链接的弹窗问题

解决方法 【信任中心】-> 【消息栏】->勾选如下策略提示 2. 【信任中心】->【外部内容】->启用下面的三项链接 3. 【信任中心】->【宏设置】->启用所有宏

C++ 随机数

在许多情况下,需要生成随机数。关于随机数生成器,有两个相关的函数。一个是 rand(),该函数只返回一个伪随机数。生成随机数之前必须先调用 srand() 函数。 下面是一个关于生成随机数的简单实例。实例中使用了 time() 函数来获取系统时间的秒…

web安全学习笔记(10)

记一下第十四节课的内容。 一、MySQL学习 数据库基本结构:库——表——列——值 在本地打开navicat,连接数据库,新建一个liuyan库、liuyan库下新建一个member表: 在表里随意添加一些数据: 下面我们学习MySQL查询。新…

MATLAB求和函数

语法 S sum(A) S sum(A,“all”) S sum(A,dim) S sum(A,vecdim) S sum(,outtype) S sum(,nanflag) 说明 示例 S sum(A) 返回沿大小大于 1 的第一个数组维度计算的元素之和。 如果 A 是向量,则 sum(A) 返回元素之和。 如果 A 是矩阵,则 sum(A) 将…

今日刷三题(day4):简写单词+dd爱框框+除2!

题目一:简写单词 题目描述: 比如 “College English Test”可以简写成“CET”,“Computer Science”可以简写为“CS”,“I am Bob”简写为“IAB” 输入输出描述: 输入:一个复合单词 输出:输…