#星计划#基于鸿蒙应用实战：新闻阅读应用原创

鱼弦CTO

发布于 2023-12-23 14:22

浏览

0收藏

鱼弦：CSDN内容合伙人、CSDN新星导师、全栈领域优质创作者、51CTO(Top红人+专家博主) 、github开源爱好者（go-zero源码二次开发、游戏后端架构 https://github.com/Peakchen）

#星计划#基于鸿蒙应用实战：新闻阅读应用-鸿蒙开发者社区

原理详细解释：
上述示例是一个简单的新闻阅读应用，使用鸿蒙应用开发框架进行开发。下面对其原理进行详细解释：

底层架构：
底层架构使用鸿蒙应用开发框架，该框架基于华为自家的分布式系统鸿蒙操作系统（HarmonyOS）构建。鸿蒙应用开发框架提供了一套丰富的组件和工具，可以用于开发多种设备上的应用程序，包括智能手机、平板电脑、智能手表、智能电视等。
流程图：
以下是示例应用的流程图：

+-----------------------+
|  NewsListPage         |
+-----------------------+
|  - 初始化新闻数据       |
|  - 设置搜索框监听器     |
|  - 设置新闻列表容器    |
+-----------------------+
          |
          | 用户操作
          |
+-----------------------+
|  NewsDetailPage       |
+-----------------------+
|  - 根据新闻ID获取内容 |
|  - 设置新闻标题和内容  |
+-----------------------+
```

用户从新闻列表页进入新闻详情页，点击列表项时将触发相应的事件，新闻详情页根据新闻ID获取对应的新闻内容并显示。1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

使用场景解释：
该示例适用于需要展示新闻列表，并提供搜索和查看新闻详情的场景。用户可以在搜索框中输入关键字进行新闻搜索，点击列表项可以查看相应新闻的详细内容。
代码实现效果：
以上代码实现了一个简单的新闻阅读应用，包括新闻列表页和新闻详情页。在新闻列表页中，用户可以通过搜索框输入关键字进行新闻搜索，搜索结果将实时更新并展示在列表中。点击列表项将跳转到对应的新闻详情页，显示新闻的标题和内容。

以下是一个完整的新闻阅读应用的鸿蒙应用开发示例。

XML 布局文件：

<!-- news_list_page.xml -->
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <TextField
        ohos:id="$+id/search_textfield"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:margins="16vp"
        ohos:inputType="text"
        ohos:hint="Search news" />

    <ListContainer
        ohos:id="$+id/news_list_container"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:margins="16vp"
        ohos:orientation="vertical" />

</DirectionalLayout>

<!-- news_card.xml -->
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="wrap_content"
    ohos:width="match_parent"
    ohos:padding="16vp"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id/news_title"
        ohos:height="wrap_content"
        ohos:width="match_parent"
        ohos:textSize="20fp"
        ohos:paddingBottom="8vp" />

    <Text
        ohos:id="$+id/news_summary"
        ohos:height="wrap_content"
        ohos:width="match_parent"
        ohos:paddingBottom="8vp" />

</DirectionalLayout>

<!-- news_detail_page.xml -->
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id/news_title"
        ohos:height="wrap_content"
        ohos:width="match_parent"
        ohos:textSize="24fp"
        ohos:padding="16vp" />

    <Text
        ohos:id="$+id/news_content"
        ohos:height="wrap_content"
        ohos:width="match_parent"
        ohos:padding="16vp" />

</DirectionalLayout>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.

Java 代码：

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.ability.Intent;
import ohos.agp.components.*;
import ohos.agp.components.Component.*;
import ohos.agp.utils.LayoutAlignment;
import java.util.List;
import java.util.ArrayList;

public class NewsListPage extends AbilitySlice {
    private List<News> newsData;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_news_list_page);

        // 初始化新闻数据
        newsData = getNewsData();

        // 获取搜索框组件
        TextField searchTextField = (TextField) findComponentById(ResourceTable.Id_search_textfield);
        searchTextField.setTextObserver(new TextObserver() {
            @Override
            public void onTextUpdated(String text) {
                // 进行搜索操作
                performSearch(text);
            }
        });

        // 获取新闻列表容器组件
        ListContainer newsListContainer = (ListContainer) findComponentById(ResourceTable.Id_news_list_container);
        newsListContainer.setItemProvider(new NewsItemProvider());

        // 设置新闻列表项点击事件
        newsListContainer.setItemClickedListener(new ItemClickedListener() {
            @Override
            public void onItemClicked(Component component, int position, long id) {
                // 获取点击的新闻数据
                News news = newsData.get(position);

                // 跳转到新闻详情页面
                Intent detailIntent = new Intent();
                detailIntent.setParam("newsId", news.getId());
                present(new NewsDetailPage(), detailIntent);
            }
        });
    }

    private List<News> getNewsData() {
        // 模拟获取新闻数据
        List<News> newsList = new ArrayList<>();
        newsList.add(new News(1, "News 1", "Summary 1", "Content 1"));
        newsList.add(new News(2, "News 2", "Summary 2", "Content 2"));
        newsList.add(new News(3, "News 3", "Summary 3", "Content 3"));
        return newsList;
    }

    private void performSearch(String keyword) {
        // 根据关键字执行搜索操作
        // 更新新闻列表数据
        List<News> filteredNewsList = filterNews(keyword);
        updateNewsList(filteredNewsList);
    }

    private List<News> filterNews(String keyword) {
        // 根据关键字过滤新闻数据
        List<News> filteredNewsList = new ArrayList<>();
        for (News news : newsData) {
            if (news.getTitle().contains(keyword) || news.getSummary().contains(keyword)) {
                filteredNewsList.add(news);
            }
        }
        return filteredNewsList;
    }

    private void updateNewsList(List<News> newsList) {
        // 更新新闻列表数据
        ListContainer newsListContainer = (ListContainer) findComponentById(ResourceTable.Id_news_list_container);
        newsListContainer.setItemProvider(new NewsItemProvider(newsList));
    }

    private class NewsItemProvider extends BaseItemProvider {
        private List<News> newsList;

        public NewsItemProvider() {
            this.newsList = new ArrayList<>();
        }

        public NewsItemProvider(List<News> newsList) {
            this.newsList = newsList;
        }

        @Override
        public int getCount() {
            return newsList.size();
        }

        @Override
        public Object getItem(int position) {
            return newsList.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public Component getComponent(int position, Component component, ComponentContainer componentContainer) {
            News news = newsList.get(position);

            Component newsCard = LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_news_card, null, false);
            Text newsTitle = (Text) newsCard.findComponentById(ResourceTable.Id_news_title);
            Text newsSummary = (Text) newsCard.findComponentById(ResourceTable.Id_news_summary);

            newsTitle.setText(news.getTitle());
            newsSummary.setText(news.getSummary());

            return newsCard;
        }
    }
}

public class NewsDetailPage extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_news_detail_page);

        // 获取新闻 ID
        int newsId = intent.getIntParam("newsId", 0);

        // 根据新闻 ID 获取新闻内容
        News news = getNewsById(newsId);

        // 设置新闻标题和内容
        Text newsTitle = (Text) findComponentById(ResourceTable.Id_news_title);
        Text newsContent = (Text) findComponentById(ResourceTable.Id_news_content);

        newsTitle.setText(news.getTitle());
        newsContent.setText(news.getContent());
    }

    private News getNewsById(int newsId) {
        // 根据新闻 ID 获取新闻内容
        // 这里可以从服务器或本地数据库中获取新闻内容
        // 这里只是一个示例，直接返回固定的内容
        return new News(newsId, "News " + newsId, "Summary " + newsId, "Content " + newsId);
    }
}

public class News {
    private int id;
    private String title;
    private String summary;
    private String content;

    public News(int id, String title, String summary, String content) {
        this.id = id;
        this.title = title;
        this.summary = summary;
        this.content = content;
    }

    public int getId() {
        return id;
    }

    public String getTitle() {
        return title;
    }

    public String getSummary() {
        return summary;
    }

    public String getContent() {
        return content;1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.

以上代码是一个简化的示例，并可能需要根据您的具体需求进行修改和完善。

文献材料链接：

华为开发者官网：https://developer.harmonyos.com/cn/home
鸿蒙应用开发指南：https://developer.harmonyos.com/cn/docs/documentation/

当前产品使用情况：
鸿蒙操作系统和鸿蒙应用开发框架是华为公司推出的产品，目前已经被应用在华为自家的智能手机、平板电脑、智能手表等设备上。一些华为推出的新设备已经预装了鸿蒙操作系统，并且开发者可以使用鸿蒙应用开发框架开发应用程序来运行在这些设备上。除了华为自家的设备，鸿蒙操作系统也向其他厂商开放，一些厂商也已经开始使用鸿蒙操作系统作为其设备的操作系统。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签