6. 构建更加丰富的页面_通过listdirection属性,可以设置list组件的排列方向,设置为axis.horizont-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43303950/article/details/145501141

一、课程笔记

1.1 构建列表页面

1.1.0 引入案例——设置页面（分析页面元素）

1.1.1 List使用场景

列表式一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适用于呈现同类型或数据类型集，如图片和文本。

1.1.2 List接口介绍

（1）space参数

（2）initialIndex参数

（3）scroller参数

1.1.3 List属性介绍

（1）listDirection()

（2）lanes()

（3）divider()

（4）scrollBar()

1.1.4 List、ListItemGroup和ListItem组件的关系

1.1.5 构建设置页面

（1）定义列表数据

（2）构建列表内容

通过@Bulider定义一个settingCell用于展示列表数据内容。

（3）构建设置页面

1.2 构建丰富的页面

1.2.0 引入案例——首页页面（分析页面元素）

1.2.1 Swiper构建轮播

（1）Swiper组件的简介

（2）Swiper接口介绍

· SwiperController的使用

（3）Swipe属性介绍

· autoPlay（循环播放）

· loop（循环播放）

· 导航点样式

（4）构建首页的轮播部分

1.2.2 Grid构建网格

（1）Grid组件简介

Grid组件为网络容器，其中容器内各条目对应一个GridItem组件。

（2）设置行列数量与占比

（3）在网格布局中显示数据

（4）设置行、列间距

（5）构建首页的网格部分

1.2.3 List构建列表

这部分介绍，在本文档的1.1节已经详细介绍了。故，这里不再赘述。

1.2.4 Scroll构建可滚动页面

（1）Scroll组件简介

（2）Scroll接口介绍

（3）Scroll的使用

（4）Scroll属性介绍

· scrollable

· scrollBar

· scrollBarColor

· scrollBarWidth

（5）构建首页的可滚动效果

1.3 使用Tabs构建页签

1.3.1 认识Tabs页签

（1）Tabs组件

（2）Tabs应用场景

（3）Tabs接口介绍

（4）Tabs属性介绍

· vertical

· barMode

· barWidth

· barHeight

（5）Tabs与TabContent

· Tabs和TabContent的结构

· Tabs与TabContent的使用

1.3.2 设置TabBar位置和排列方向

（1）Tabs的不同布局

（2）设置TabBar的位置和排列方向

1.3.3 使用Tabs组件构建底部页签

（1）TabBar属性介绍

（2）构建自定义TabBar——使用@Builder

但是，这么实现页签，当用户点击某页签时，页签的样式不会发生任何变化。用户并不能直观看出当前处于哪一个页签下。所以，我们需要修改一下代码，使当前屏幕显示的页签能够高亮显示，以显示页签当前处于哪一个页面中。

1.3.4 构建主界面

1.4 使用Navigation实现导航

1.4.1 Navigation介绍

导航是一种交互方式，它使用户能够在应用的不同内容区域之间进入或退出。例如，点击登录按钮登录成功，即可跳转到应用的首页。

（1）什么是Navigation组件？

（2）Navigation天然支持一多分栏布局

（3）Navigation支持页面切换的转场动画

通过页面栈操作时，会触发不同的转场效果。

1.4.2 Navigation开发流程

（1）认识Navigation路由导航

（2）导航页Navigation和子页NavDestination

（3）RouterMap路由表

（4）NavPathStack路由栈

NavPathStack通过Push相关的接口实现页面跳转。我们以pushPath为接口为例，在下面的代码中，通过调用pushPath接口并传入对应的页面名称PageOne和param参数，即可从NavIndex页面跳转到配置PageOne页面。实际效果如下所示。

1.4.3 引入案例——页面与数据（实现页面跳转）

在LoginPage登录页面中，通过给登录按钮添加onClick事件，并在onClick事件中调用路由方法，点击登录按钮跳转至MainPage页面，进而显示首页内容。

（1）实现页面跳转的开发流程

（2）代码实现

· 构建导航页

· 构建子页

· 创建路由表

· 路由操作

二、习题整理

2.1 判断题

1. Tabs组件可以通过接口传入一个TabsController，该TabsController可以控制Tabs组件进行页签切换。

答案：A

2. 通过listDirection属性，可以设置List组件的排列方向，设置为Axis.Horizontal时，方向为纵向，为Axis.Vertical时，方向为横向。

答案：B

3. Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，可以通过该组件提供的路由能力实现首页与非首页的切换。

答案：A

2.2 单选题

1. Grid组件内，如何设置GridItem在水平方向上，后一列是前一列宽度的2倍？

A. rowsTemplate('1fr 2fr 4fr 8fr')
B. rowsTemplate('8fr 4fr 2fr 1fr')
C. columnsTemplate ('1fr 2fr 4fr 8fr')
D. columnsTemplate ('8fr 4fr 2fr 1fr')

答案：C

2. Tabs组件如何设置导航栏为左侧边导航：

A. 设置BarPosition参数为BarPosition.End，vertical属性保持默认设置或设置为false
B. 设置BarPosition参数为BarPosition.Start，vertical属性保持默认设置或设置为false
C. 设置BarPosition参数为BarPosition.End，同时设置vertical属性为true
D. 设置BarPosition参数为BarPosition.Start，同时设置vertical属性为true

答案：D

解析：

3. 以下关于页面跳转相关方法说法不正确的是：

A. pushPathByName方法可以将参数对应的页面栈信息进行入栈，从而完成对应页面的跳转
B. pushPathByName方法需要依次传入页面名称，路由参数以及是否开启转场动画，其中转场动画默认开启
C. replacePathByName方法会将页面栈栈顶元素退出，再将传入参数对应的页面栈信息进行入栈
D. replacePathByName方法需要传入一个NavPathInfo类型的对象，该对象包含了NavDestination页面的信息

答案：D

解析：

4. 下面哪个组件层次结构是错误的？

A. List>ListItem>Column
B. Column>List>ListItem
C. Grid>Row>GridItem
D. Grid>GridItem

答案：C

解析：

2.3 多选题

1. 以下属于Navigation布局模式的有：

A. 自适应模式
B. 单页面模式
C. 层叠模式
D. 分栏模式

答案：ABD

解析：设置页面显示模式

2. 关于Swiper组件的相关描述正确的是：

A. 当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。
B. Swiper通过设置autoPlay属性，控制是否自动轮播子组件。
C. Swiper支持水平和垂直方向上进行轮播，主要通过vertical属性控制。
D. Swiper支持手指滑动、点击导航点和通过控制器三种方式切换页面。

答案：ABCD

3. 关于Grid组件的相关描述正确的是：