保姆级学习开发安卓手机软件(二十二)–通过实例了解列表控件,并简单讲解一些代码习惯

哈喽，大家新年好呀，上班啦，心还没回来，感觉这个年像是过周末一样快，哈哈哈，年后第一篇分享来啦，一起收收心~~~~

本节我们通过实例讲解列表的使用。

具体效果如下：

可滑动查看。

源码如下：AppTest2.zip

（建议先下载，里面有图片资源可直接用，但是不下载也无所谓，自己选择一些喜欢的图片即可）

一、创建工程

首先我们先建立新工程：

这里记得改下下载地址：

distributionUrl=https\://mirrors.cloud.tencent.com/gradle

二、新增model软件包及数据类

我们这一步骤的目的是一种习惯吧，就是如果我们把所有的代码放在MainActivity也不是不可以，但是不易查看及修改，显得比较臃肿，那面对对象的思路就是把整体变成模块化，在需要的地方进行组装，所以我们的思路就是拆分功能。

而软件包就相当于一个文件夹，我们将同类的实现功能放在一个软件包里方便管理。

model这一个软件包的目的就是将后续所有数据类放在这个包中，例如我们这次建立的Affirmation数据类，里面存放的就是我们想要实现的列表里含有的属性。

不理解的先往下看。

创建软件包：

回车即可生成对应的model软件包。

再创建数据类Affirmation：

一样的进行回车，即可生成数据类。

我们来填充数据类：

@StringRes val stringResourceId: Int,//存储在字符串资源中的文本的 ID@DrawableRes val imageResourceId: Int//存储在可绘制资源中的图片的 ID

到这里我们就明白了，我们创建了一个类，这个类可以保存列表一个单项的文本描述Id和图片资源Id。（我们放在资源中）

三、添加资源

为了实现效果，我们还需要先完善对应的资源绑定。

添加图片资源：

添加字符串资源：

添加xml内容：

<string name="affirmation1">I am strong.</string> <stringname="affirmation2">I believe in myself.</string> <stringname="affirmation3">Each day is a new opportunity to grow and be a better version of myself.</string> <stringname="affirmation4">Every challenge in my life is an opportunity to learn from.</string> <stringname="affirmation5">I have so much to be grateful for.</string> <stringname="affirmation6">Good things are always coming into my life.</string> <stringname="affirmation7">New opportunities await me at every turn.</string> <stringname="affirmation8">I have the courage to follow my heart.</string> <stringname="affirmation9">Things will unfold at precisely the right time.</string> <stringname="affirmation10">I will be present in all the moments that this day brings.</string>

四、新建data软件包及类

再次新增一个data软件包，并新增一个类，作用后续讲：

在新建类中添加一个函数：

import com.example.affirmations.Rimport com.example.affirmations.model.Affirmationclass Datasource { fun loadAffirmations(): List<Affirmation> { return listOf<Affirmation>( Affirmation(R.string.affirmation1, R.drawable.image1), Affirmation(R.string.affirmation2, R.drawable.image2), Affirmation(R.string.affirmation3, R.drawable.image3), Affirmation(R.string.affirmation4, R.drawable.image4), Affirmation(R.string.affirmation5, R.drawable.image5), Affirmation(R.string.affirmation6, R.drawable.image6), Affirmation(R.string.affirmation7, R.drawable.image7), Affirmation(R.string.affirmation8, R.drawable.image8), Affirmation(R.string.affirmation9, R.drawable.image9), Affirmation(R.string.affirmation10, R.drawable.image10)) }}

loadAffirmations() 方法会收集起始代码中提供的所有数据，并以列表形式将其返回。

我们这一步的意图是后续使用这些数据来构建可滚动列表。

五、构建UI

首先我们修改主界面UI代码，创建函数让代码模块化：

import com.example.affirmations.model.Affirmation

现在我们来完善AffirmationCard()函数：

@ComposablefunAffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) {//接受 Affirmation 对象作为形参,Affirmation 对象来自 model 软件包。 //调用 Card 可组合项 Card(modifier=modifier){ Column{ Image( painter = painterResource(affirmation.imageResourceId), contentDescription = stringResource(affirmation.stringResourceId), modifier= Modifier.fillMaxWidth() .height(194.dp), contentScale = ContentScale.Crop//按比例放大 / 缩小(框内无空白，但图片可能被裁掉一部分。) ) Text( text = LocalContext.current.getString(affirmation.stringResourceId), modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.headlineSmall//使用Material Design主题中定义的headlineSmall字体样式 ) } }}

在函数中我们添加了一个图片和一个文字，并让其两列显示，在最外部，我们使用了Card容器。

通过在原有函数中调用，就可以实现卡片效果：

六、构建列表

先新建一个函数用于构建列表：

@ComposablefunAffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) {}

再来看对应的列表控件：

在 Jetpack Compose 中，可以使用 LazyColumn可组合项创建可滚动列表。

LazyColumn和Column之间的区别在于，当要显示的项数量较少时，应使用Column，因为 Compose 会一次性加载所有项。

Column只能保存预定义或固定数量的可组合项。

LazyColumn可以按需添加内容，因此非常适合较长的列表，尤其是当列表长度未知时。LazyColumn还提供默认滚动行为，无需添加其他代码。

因而，在AffirmationList()函数内声明一个LazyColumn可组合项。将modifier对象作为参数传递给LazyColumn。

我们来完善对应的函数内容：

@ComposablefunAffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) { LazyColumn(modifier = modifier) { items(affirmationList) { singleAffirmation -> AffirmationCard( affirmation = singleAffirmation, modifier = Modifier.padding(8.dp) ) } }}

报错的话导入即可：

修改主函数：

@ComposablefunGreeting(name: String, modifier: Modifier = Modifier) { val layoutDirection = LocalLayoutDirection.current//检索当前的布局方向并将其保存在变量中。它们将用于稍后配置内边距 //创建一个 Surface 可组合项。此可组合项将设置 AffirmationsList 可组合项的内边距。 Surface( modifier = Modifier .fillMaxSize() .statusBarsPadding() .padding( //将 LayoutDirection 对象转换为内边距 start = WindowInsets.safeDrawing.asPaddingValues() .calculateStartPadding(layoutDirection), end = WindowInsets.safeDrawing.asPaddingValues() .calculateEndPadding(layoutDirection), ), ) { AffirmationList( affirmationList = Datasource().loadAffirmations(),//调用资源 ) }}

这里说明一下，Surface是Material Design 内置的视觉规范，不加上的话需要手动写更多样式代码。有关Material Design，下节我们单独来讲解，这节大家主要了解列表控件及创建软件包及类。

如果遇到报错：

加 Surface（你的代码）	不加 Surface（直接写）
边距适配逻辑承载在独立的页面层，列表滚动区域正常	边距加在 `LazyColumn` 上，列表的滚动范围会被压缩，甚至滚动条位置异常
自动继承主题背景色，视觉统一	需手动给 `LazyColumn` 设置背景色，容易和 `Card` 样式冲突
符合 Material Design 规范，适配深色模式 / 系统主题	自定义容器需手动处理主题适配，代码冗余

保姆级学习开发安卓手机软件(二十二)–通过实例了解列表控件,并简单讲解一些代码习惯

一、创建工程

二、新增model软件包及数据类

三、添加资源

四、新建data软件包及类

五、构建UI

六、构建列表

wang

猜你喜欢

评论抢沙发

一、创建工程

二、新增model软件包及数据类

三、添加资源

四、新建data软件包及类

五、构建UI

六、构建列表

wang

猜你喜欢

评论 抢沙发

评论抢沙发