前言

popup弹窗，可以说是一个很常见的功能，像上边的微信，以及很多的应用，都会存在这样的需求，鸿蒙原生Api中，对于popup弹窗，可以说实现起来特别的简单，直接使用提供的

bindPopup方法即可。

这个系列的上一篇教程，教大家写了一个最简单的 Hello world 微信小程序。

但是，那只是一个裸页面，并不好看。今天接着往下讲，如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页面。

所有示例的完整代码，都可以从 GitHub 的代码仓库^[1]下载。

一、总体样式

微信小程序允许在顶层放置一个app.wxss文件，里面采用 CSS 语法设置页面样式。这个文件的设置，对所有页面都有效。

各位周末好，今天为大家来仓颉语言外卖App的实战分享。

我们可以先分析一下页面的布局结构，它是由导航栏和List容器组成的。幽蓝君目前依然没有找到仓颉语言导航栏的系统组件，还是要自定义，这个导航栏有三部分内容，可以使用两端对齐，要注意的是，如果需要中间部分在页面中间需要两端的内容宽度相同。导航栏和页面的布局结构代码如下：

## 什么是视频播放器组件

在鸿蒙HarmonyOS的ArkTS开发框架中，视频播放器组件（Video）是专门用于音视频媒体内容播放的核心UI组件。这个组件不仅提供了强大的视频解码和渲染能力，还集成了完整的播放控制逻辑，为开发者构建多媒体应用提供了一站式的解决方案。视频播放器组件支持多种主流的视频格式，包括MP4、AVI、MKV、WebM等，同时也支持网络流媒体和本地文件的播放。

前言

本文基于Api13

来了一个需求，要实现顶部下拉刷新，并且顶部的标题栏，下拉状态下跟随手势刷新，上拉状态下进行吸顶，也就是tabs需要固定在顶部标题栏的下面，基本的效果可以看下图，下图是一个Demo，实际的需求，顶部标题栏带有渐变显示，不过这些不是重点。

仓颉语言商城应用的页面开发教程接近尾声了，今天要分享的是设置页面：

导航栏还是老样式，介绍过很多次了，今天不再赘述。这个页面的内容主要还是介绍List容器的使用。

可以看出列表内容分为三组，所以我们要用到ListItemGroup，不过第一组是没有标题的，所以可以直接使用ListItem，布局很简单，具体代码如下：

1. React Context 使用方法

import React, { createContext, useState, useContext } from 'react';

// 定义 Context 的类型接口
interface UserContextType {
username: string;
setUsername: (username: string) => void;
}

// 创建 Context，并提供默认值
const UserContext = createContext<UserContextType>({
username: '',
setUsername: () => {}
});

// Provider 组件
export const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [username, setUsername] = useState<string>('');

return (
  <UserContext.Provider value={{ username, setUsername }}>
    {children}
  </UserContext.Provider>
);
};

// 自定义 Hook 简化 Context 使用
export const useUser = () => useContext(UserContext);

// 使用示例组件
const ProfileComponent: React.FC = () => {
const { username, setUsername } = useUser();

return (
  <div>
    <input 
      value={username} 
      onChange={(e) => setUsername(e.target.value)} 
      placeholder="输入用户名" 
    />
    <p>当前用户: {username}</p>
  </div>
);
};

// 根组件
const App: React.FC = () => {
return (
  <UserProvider>
    <ProfileComponent />
  </UserProvider>
);
};

export default App;

在写页面的时候，经常会遇到元素垂直居中的需求。有时候一连试了几种方法，并没有效果，那是因为你没有用对方法，每种垂直居中，都有不同的使用条件。下面我们来详细了解一下吧。

这里收集了八种不同的方法。

一、行高，line-height。

适用场景：单行文字垂直居中。