HarmonyOS学习第15天：轻松掌握页面导航与路由

本文链接：https://blog.csdn.net/qq_22232065/article/details/146052752

从 0 到 1：开启 HarmonyOS 页面导航之旅

在 HarmonyOS 应用开发的广袤天地中，页面导航与路由堪称构建流畅用户体验的关键基石。想象一下，用户在使用应用时，就像在一座繁华的城市中穿梭，而页面导航与路由则是这座城市的交通网络，指引着用户从一个 “地点”（页面）顺畅抵达另一个 “地点”。倘若这个 “交通网络” 规划混乱，用户就会在应用中迷失方向，陷入困惑与烦躁之中，应用的口碑和用户留存率也将随之大打折扣。

举个例子，在一款电商应用中，用户需要从商品列表页面跳转至商品详情页面，查看商品的具体信息；完成购买后，又要跳转至订单确认页面和支付页面。在这个过程中，每一次页面跳转都伴随着数据的传递，如商品的 ID、价格、数量等。只有实现精准、高效的页面导航与路由，才能确保用户购物流程的顺畅，提升用户的购物体验，进而促进交易的达成。

再比如，在社交应用中，用户从个人主页跳转到好友动态页面，从聊天列表页面进入具体的聊天会话页面，这些操作都依赖于页面导航与路由功能。而且，社交应用中常常需要实时更新数据，如未读消息数量等，这就要求页面导航与路由在实现跳转的同时，能够高效地管理页面的生命周期和数据交互，为用户提供及时、准确的信息展示。

由此可见，深入掌握 HarmonyOS 应用中的页面导航与路由功能，对于开发者打造优质、易用的应用至关重要。接下来，就让我们一同揭开这一关键技术的神秘面纱，探索其实现的奥秘。

Intent：开启页面跳转的魔法钥匙

（一）Intent 基础与简单页面跳转

在 HarmonyOS 开发中，Intent 堪称开启页面跳转大门的魔法钥匙。它是一种用于在不同组件（如 Ability、AbilitySlice）之间传递信息的对象，不仅能指定启动的目标组件，还能携带相关数据，就像是一个智能的 “快递员”，准确地将各种信息传递到指定 “地点”。

以一个简单的应用场景为例，假设我们有一个包含首页（MainAbilitySlice）和详情页（DetailAbilitySlice）的应用。当用户在首页点击某个商品时，需要跳转到详情页查看商品的详细信息。此时，Intent 就能大显身手。在 Java 代码中，实现这一简单页面跳转的步骤如下：

// 在MainAbilitySlice中，为商品点击事件添加处理逻辑

Button productButton = (Button) findComponentById(ResourceTable.Id_product_button);

productButton.setClickedListener(new Component.ClickedListener() {

@Override

public void onClick(Component component) {

// 创建Intent对象

Intent intent = new Intent();

// 通过Intent中的OperationBuilder类构造operation对象，指定设备标识（空串表示当前设备）、应用包名、目标AbilitySlice名称

Operation operation = new Intent.OperationBuilder()

.withDeviceId("")

.withBundleName(getBundleName())

.withAbilityName("com.example.myapp.DetailAbilitySlice")

.build();

// 把operation设置到intent中

intent.setOperation(operation);

// 启动目标AbilitySlice

present(new DetailAbilitySlice(), intent);

}

});

在上述代码中，首先获取首页中的商品按钮，并为其设置点击监听器。当按钮被点击时，创建一个 Intent 对象，并通过 OperationBuilder 构建一个 Operation 对象，指定目标 AbilitySlice 的相关信息。最后，使用present方法启动目标 AbilitySlice，从而实现从首页到详情页的跳转。

（二）传递参数：让页面交流更丰富

Intent 不仅能实现页面跳转，还能在跳转过程中传递各种参数，让不同页面之间能够进行丰富的信息交流，就像为 “快递员” 赋予了更强大的 “带货” 能力。这些参数可以是基本数据类型（如 int、String 等），也可以是可序列化的对象，满足多样化的数据传递需求。

接着上面的商品详情页示例，我们需要将商品的 ID、名称、价格等信息传递到详情页进行展示。在 Java 代码中，传递和接收参数的实现方式如下：

// 在MainAbilitySlice中，传递参数

Button productButton = (Button) findComponentById(ResourceTable.Id_product_button);

productButton.setClickedListener(new Component.ClickedListener() {

@Override

public void onClick(Component component) {

Intent intent = new Intent();

Operation operation = new Intent.OperationBuilder()

.withDeviceId("")

.withBundleName(getBundleName())

.withAbilityName("com.example.myapp.DetailAbilitySlice")

.build();

intent.setOperation(operation);

// 传递参数

intent.setParam("productId", "12345");

intent.setParam("productName", "HarmonyOS智能手表");

intent.setParam("productPrice", 1999.99);

present(new DetailAbilitySlice(), intent);

}

});

// 在DetailAbilitySlice中，接收参数

@Override

public void onStart(Intent intent) {

super.onStart(intent);

super.setUIContent(ResourceTable.Layout_detail_ability);

// 接收参数

String productId = intent.getStringParam("productId");

String productName = intent.getStringParam("productName");

double productPrice = intent.getDoubleParam("productPrice", 0.0);

// 使用参数进行页面展示

Text productIdText = (Text) findComponentById(ResourceTable.Id_product_id_text);

Text productNameText = (Text) findComponentById(ResourceTable.Id_product_name_text);

Text productPriceText = (Text) findComponentById(ResourceTable.Id_product_price_text);

productIdText.setText("商品ID：" + productId);

productNameText.setText("商品名称：" + productName);

productPriceText.setText("商品价格：" + productPrice);

}

在上述代码中，在首页的商品点击事件处理逻辑中，通过intent.setParam方法将商品的 ID、名称和价格等参数添加到 Intent 中。在详情页的onStart方法中，使用intent.getStringParam和intent.getDoubleParam等方法从 Intent 中获取传递过来的参数，并将这些参数展示在详情页的相应位置，实现了页面之间的数据传递与展示，使应用的交互更加灵活和丰富。

构建复杂导航模式：导航栏与侧边栏

在 HarmonyOS 应用开发中，除了基本的 Intent 页面跳转和参数传递，构建复杂的导航模式能显著提升应用的交互性和用户体验。导航栏和侧边栏作为常见的复杂导航组件，为用户提供了便捷的操作入口和清晰的页面结构。下面我们就来深入探讨它们的实现方法。

（一）打造专属导航栏

底部导航栏在众多应用中广泛应用，它就像一个便捷的 “操作面板”，让用户能快速切换不同的功能模块。在 HarmonyOS 中，实现底部导航栏有多种方式，我们先来看通过自定义 Component 的方法。

首先，创建一个布局文件item_route.xml，用于定义底部导航栏每个选项卡的样式：

<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_content"

ohos:alignment="center"

ohos:orientation="vertical">

<Image

ohos:id="$+id:img"

ohos:height="25vp"

ohos:width="25vp"

ohos:bottom_margin="1vp"

ohos:scale_mode="inside"/>

<Text

ohos:id="$+id:text"

ohos:height="match_content"

ohos:width="match_content"

ohos:text_color="$color:hintColor"

ohos:text_size="10vp"/>

</DirectionalLayout>

接着，创建自定义 Component 类RouteView.java，在这个类中，我们设置导航栏的方向、添加选项卡、处理点击事件以及更新选项卡的状态：

public class RouteView extends DirectionalLayout {

private static final int ITEM_LAYOUT = ResourceTable.Layout_item_route;

private List<Data> data;

private Callback callback;

public RouteView(Context context) {

this(context, null);

}

public RouteView(Context context, AttrSet attrSet) {

this(context, attrSet, null);

}

public RouteView(Context context, AttrSet attrSet, String styleName) {

super(context, attrSet, styleName);

init();

}

private void init() {

setOrientation(HORIZONTAL); //设置水平方向

}

public void setCallback(Callback callback) {

this.callback = callback;

}

public void setData(DataBuilder builder) {

setData(builder, 0);

}

public void setData(DataBuilder builder, int p) {

data = builder.build();

createItems();

select(p);

}

public void select(int p) {

for (int i = 0; i < data.size(); i++) {

data.get(i).selected = i == p;

refreshItemData(i);

}

private void createItems() {

data.forEach(d -> addComponent(createItem(), new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT, HORIZONTAL, 1)));

}

private Component createItem() {

Component component = LayoutScatter.getInstance(getContext()).parse(ITEM_LAYOUT, null, false);

ViewHolder holder = new ViewHolder();

holder.img = (Image) component.findComponentById(ResourceTable.Id_img);

holder.text = (Text) component.findComponentById(ResourceTable.Id_text);

component.setTag(holder);

component.setClickedListener(v -> {

int p = getChildIndex(v);

if (p < 0) return;

select(p);

if (callback != null) callback.onItemClicked(p);

});

return component;

}

private void refreshItemData(int p) {

Component component = getComponentAt(p);

Object tag = component.getTag();

if (!(tag instanceof ViewHolder)) return;

ViewHolder holder = (ViewHolder) tag;

holder.text.setText(data.get(p).text);

holder.img.setPixelMap(data.get(p).getImageRes());

holder.text.setTextColor(ResUtil.getColorObj(getContext(), data.get(p).getColorRes()));

}

public interface Callback {

void onItemClicked(int p);

}

static class ViewHolder {

Text text;

Image img;

}

static class Data {

String text;

int imageRes, selectedImageRes;

int colorRes, selectedColorRes;

boolean selected;

public Data(String text, int imageRes, int selectedImageRes, int colorRes, int selectedColorRes) {

this.text = text;

this.imageRes = imageRes;

this.selectedImageRes = selectedImageRes;

this.colorRes = colorRes;

this.selectedColorRes = selectedColorRes;

}

public int getImageRes() {

return selected? selectedImageRes : imageRes;

}

public int getColorRes() {

return selected? selectedColorRes : colorRes;

}

public static class DataBuilder {

private final List<Data> data = new ArrayList<>();

public DataBuilder add(String text, int imageRes, int selectedImageRes, int colorRes, int selectedColorRes) {

data.add(new Data(text, imageRes, selectedImageRes, colorRes, selectedColorRes));

return this;

}

public List<Data> build() {

return data;

}

在上述代码中，RouteView继承自DirectionalLayout，通过init方法设置为水平方向布局。setData方法用于设置导航栏的数据，createItems方法根据数据创建选项卡，select方法用于选中某个选项卡并更新其状态，createItem方法创建单个选项卡的视图，并为其添加点击监听器。当选项卡被点击时，会调用callback.onItemClicked方法，实现页面的切换逻辑。

除了自定义 Component，我们还可以使用系统提供的Tabs组件来实现底部导航栏。下面是使用Tabs组件的示例代码：

@Entry

@Component

struct Index {

//默认颜色

@State fontColor: string = '#666666';

//选中时的颜色

@State selectedFontColor: string = '#00c800';

//默认下标

@State currentIndex: number = 0;

@Builder

tabBuilder(index: number, title: string, icon: Resource) {

Column() {

Image(icon).width(24).height(24).fillColor(this.currentIndex == index? this.selectedFontColor : this.fontColor).margin({ bottom: 4 }).objectFit(ImageFit.Contain);

Text(title).fontSize(10).fontColor(this.currentIndex == index? this.selectedFontColor : this.fontColor).fontWeight(500).lineHeight(14);

}

build() {

Column() {

Tabs({ barPosition: BarPosition.End }) {

TabContent() {

Text('微信好友列表').fontSize(30);

}.tabBar(this.tabBuilder(0, '微信', $r('app.media.img_home')));

TabContent() {

Text('通讯录').fontSize(30);

}.tabBar(this.tabBuilder(1, '通讯录', $r('app.media.img_address')));

TabContent() {

Text('发现').fontSize(30);

}.tabBar(this.tabBuilder(2, '发现', $r('app.media.img_find')));

TabContent() {

Text('我的').fontSize(30);

}.tabBar(this.tabBuilder(3, '我的', $r('app.media.img_mine')));

}

//设置不允许左右滑动

.scrollable(false)

//设置点击事件

.onChange((index: number) => {

this.currentIndex = index;

});

}

在这段代码中，首先定义了一些状态变量，如fontColor（默认颜色）、selectedFontColor（选中时的颜色）和currentIndex（当前选中的索引）。tabBuilder方法是一个自定义构建函数，用于创建每个选项卡的 UI，包括图标和文本，并根据当前选中状态设置颜色。在build方法中，使用Tabs组件构建底部导航栏，通过TabContent定义每个选项卡对应的内容页面，tabBar属性指定每个选项卡的样式，scrollable(false)禁止左右滑动，onChange事件监听选项卡的切换，并更新currentIndex。通过这种方式，我们可以轻松实现一个功能齐全的底部导航栏。

（二）侧边栏的巧妙设计与实现

侧边栏作为一种常见的导航模式，能在有限的屏幕空间内为用户提供丰富的操作选项，就像一个隐藏的 “功能宝库”，用户可以根据需要展开或收起。在 HarmonyOS 中，使用 ArkUI 可以方便地实现侧边栏的设计与交互。

首先，我们来定义侧边栏的布局结构。侧边栏通常使用List、Stack等容器来组织不同的菜单项，而主内容区域则使用Page、ScrollView等容器来展示主要内容。以下是一个使用Stack和自定义Drawer组件实现侧边栏布局的示例代码：

<List>

</List>

</Drawer>

<Text>这里是主内容区</Text>

</Stack>

在上述代码中，Stack组件用于水平排列侧边栏和主内容区。Drawer组件模拟了侧边栏的效果，通过open属性控制侧边栏的展开和收起状态，width属性设置侧边栏的宽度。List组件用于组织侧边栏的菜单项，每个ListItem代表一个菜单项，并通过onClick属性绑定点击事件处理函数。

接下来，编写处理侧边栏显示和隐藏的交互逻辑。在 JavaScript 部分，通过修改状态来控制Drawer组件的open属性，实现侧边栏的展开和收起。示例代码如下：

export default {

data: {

drawerOpen: false // 控制抽屉是否打开

handleMenuItemClick(item) {

console.log(`点击了菜单项: ${item}`);

// 根据需要处理菜单点击事件

// 关闭抽屉

this.drawerOpen = false;

toggleDrawer() {

// 切换抽屉的打开状态

this.drawerOpen =!this.drawerOpen;

}

在这段代码中，data对象中的drawerOpen属性用于存储侧边栏的打开状态。handleMenuItemClick函数在菜单项被点击时触发，用于处理菜单点击事件，并关闭侧边栏。toggleDrawer函数用于切换侧边栏的打开状态，当用户点击控制按钮或执行其他触发操作时，调用该函数实现侧边栏的展开和收起效果。

最后，通过 ArkUI 的样式系统，自定义侧边栏和抽屉的样式，包括颜色、字体、边距等，使侧边栏与应用的整体风格相融合。示例样式代码如下：

.drawer {

background-color: #f0f0f0;

/* 其他样式 */

}

.drawer-item {

padding: 16px;

color: #333;

/* 菜单项样式 */

}

在上述 CSS 代码中，.drawer类定义了侧边栏的整体样式，包括背景颜色。.drawer-item类定义了侧边栏菜单项的样式，如内边距和文本颜色。通过这些样式设置，可以使侧边栏在视觉上更加美观和易于操作。

复杂导航模式拓展：更多应用场景与技巧

（一）动态导航与页面堆栈管理

在 HarmonyOS 应用开发中，动态导航与页面堆栈管理是实现高效用户交互的重要环节，它就像一个智能的 “交通调度系统”，能够根据用户的操作和应用的状态，灵活地管理页面的跳转和显示。

在一些具有复杂业务逻辑的应用中，如电商应用的订单流程或社交应用的消息处理流程，页面的显示和跳转需要根据用户的操作和数据状态进行动态调整。以电商应用为例，用户在购物过程中，从商品列表页到商品详情页，再到购物车页、结算页和支付页，每一步的操作都可能影响后续页面的显示内容和跳转逻辑。此时，就需要借助 Navigation 组件的强大功能来实现动态导航。

Navigation 组件提供了多种显示模式，如自适应模式（NavigationMode.Auto）、单页面模式（NavigationMode.Stack）和分栏模式（NavigationMode.Split）。在自适应模式下，组件会根据设备的宽度自动选择单栏或者分栏模式，当设备宽度大于一定阈值（API version 9 及以前：520vp，API version 10 及以后：600vp ）时，采用分栏模式，反之采用单页面模式。这种自适应的特性使得应用能够在不同设备上都保持良好的用户体验，无论是手机、平板还是大屏设备。

在页面跳转方面，Navigation 组件通过 NavPathStack 实现页面路由，能够方便地实现页面的压栈和出栈操作，从而管理页面的历史记录和返回逻辑。例如，在一个多页面应用中，用户从首页依次进入详情页、设置页和帮助页，当用户点击返回按钮时，NavPathStack 会按照后进先出的原则，依次将帮助页、设置页和详情页从堆栈中弹出，使用户回到上一个页面，确保用户操作的连贯性和逻辑性。

此外，Navigation 组件还可以配置标题栏和工具栏，为用户提供清晰的页面标识和便捷的操作入口。标题栏可以设置为 Mini 模式（用于一级页面不需要突出标题的场景）或 Full 模式（用于一级页面需要突出标题的场景），工具栏则可以添加各种操作按钮，如搜索、添加、设置等，满足应用的不同功能需求。

（二）路由与深层链接的应用

路由和深层链接是 HarmonyOS 应用中实现页面导航的重要概念，它们为用户提供了更加便捷、高效的访问方式，就像为用户提供了一把能够直接打开应用内任意 “房间” 的万能钥匙。

路由是指应用内页面之间的导航机制，通过定义路由规则，开发者可以指定不同页面之间的跳转关系和参数传递方式。在 HarmonyOS 中，路由可以通过系统提供的 API 实现，如router.pushUrl、router.replaceUrl等方法。这些方法不仅可以实现页面的跳转，还可以在跳转时传递参数，实现页面间的数据共享和交互。

深层链接则是一种能够直接链接到应用内特定页面或内容的技术，它允许用户通过外部链接（如浏览器链接、短信链接等）直接进入应用的某个具体页面，而无需从应用的首页开始逐步导航。深层链接在提升用户体验、推广应用和实现跨应用交互等方面具有重要作用。

在 HarmonyOS 应用中配置和使用深层链接，首先需要在config.json文件中注册相关的 URI Scheme。例如，为一个新闻应用配置深层链接，使其能够通过链接直接打开特定的新闻详情页面：

{

"module": {

"abilities": [

{

"skills": [

{

"entities": ["entity.system.browser"],

"actions": ["action.system.view"],

"uri": {

"scheme": "newsapp",

"host": "article",

"path": "/detail"

}

"name": "com.example.newsapp.NewsDetailAbility",

"icon": "$media:icon",

"description": "$string:news_detail_ability_desc",

"type": "page",

"launchType": "standard"

}

]

}

在上述配置中，定义了一个 URI Scheme 为newsapp，host 为article，path 为/detail的深层链接，当用户点击符合该链接格式的外部链接时，系统会自动启动com.example.newsapp.NewsDetailAbility，并将链接中的参数传递给该页面。

在代码中，处理深层链接的逻辑如下：

public class NewsDetailAbility extends Ability {

@Override

public void onStart(Intent intent) {

super.onStart(intent);

// 获取深层链接传递的参数

Uri uri = intent.getUri();

if (uri != null) {

String articleId = uri.getQueryParameter("id");

// 根据articleId获取新闻详情数据并展示

loadArticleDetail(articleId);

}

private void loadArticleDetail(String articleId) {

// 从数据库或网络获取新闻详情数据

// 并将数据展示在页面上

}

在onStart方法中，通过intent.getUri获取深层链接的 URI，然后从 URI 中提取参数（如新闻 ID），根据参数加载并展示相应的新闻详情内容，实现了深层链接的功能，为用户提供了更加便捷的访问方式。

实践与优化：让导航体验更上一层楼

（一）实际案例分析

以知名的 HarmonyOS 应用 “花瓣地图” 为例，深入剖析其页面导航和路由的实现方式，能为我们带来许多宝贵的经验和启示。在花瓣地图中，底部导航栏的设计简洁而高效，它由 “首页”“路线”“发现”“我的” 四个主要选项卡组成。用户可以轻松地通过点击这些选项卡，在不同的功能模块之间进行切换，就像在熟悉的街道上自由穿梭。

当用户在首页搜索目的地后，点击搜索结果，会跳转到路线规划页面。在这个跳转过程中，花瓣地图通过 Intent 传递了详细的目的地信息，确保路线规划页面能够准确地根据用户需求生成路线。这一过程不仅实现了页面的快速跳转，还保证了数据的准确传递，就像快递员精准地将包裹送到收件人手中。

在地图浏览过程中，用户还可以通过侧边栏查看更多功能，如收藏地点、设置偏好等。侧边栏的设计巧妙地利用了屏幕空间，为用户提供了便捷的操作入口，当用户点击侧边栏菜单项时，应用会根据菜单项的不同，执行相应的页面跳转或功能操作，整个交互过程流畅自然，极大地提升了用户体验。