前言

首页是用户进入应用后的主要落地页面，承担着内容展示和功能导航的双重职责。青花瓷App的首页将展示精选藏品、文化资讯和快捷入口，让用户能够快速了解应用的核心内容。

在设计首页布局时，我们借鉴了传统卷轴画的构图方式，采用纵向滚动的长页面形式，让用户如同展开一幅画卷般浏览内容。页面的留白和节奏感也参考了青花瓷器物上图案的疏密安排。

首页整体结构

首页采用CustomScrollView实现复杂的滚动效果，包含多个不同类型的内容区块。

// lib/screens/home/home_screen.dart
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          const HomeAppBar(),
          const HomeBanner(),
          const QuickActions(),
          const FeaturedCollection(),
        ],
      ),
    );
  }
}


`CustomScrollView`是Flutter中实现复杂滚动效果的利器，它可以组合多种Sliver组件。`HomeAppBar`是自定义的应用栏，`HomeBanner`是轮播图区域，`QuickActions`是快捷入口，`FeaturedCollection`是精选藏品展示。这种模块化的设计使得每个区块都可以独立开发和维护。

## 自定义应用栏

首页的应用栏需要展示应用Logo和搜索入口，同时支持滚动时的渐变效果。

```dart
// lib/screens/home/widgets/home_app_bar.dart
class HomeAppBar extends StatelessWidget {
  const HomeAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      floating: true,
      backgroundColor: PorcelainColors.glazeWhite,
      title: Row(
        children: [
          Image.asset('assets/images/logo.png', height: 32),
          const SizedBox(width: 8),
          const Text('青花瓷', 
            style: TextStyle(
              color: PorcelainColors.primaryBlue,
              fontWeight: FontWeight.bold,
            )),
        ],
      ),
      actions: [
        IconButton(
          icon: const Icon(Icons.search),
          onPressed: () {},
        ),
      ],
    );
  }
}

SliverAppBar的floating属性设为true，使得应用栏在向下滚动时会自动显示，提升了导航的便捷性。应用栏背景使用釉白色，与页面背景融为一体。Logo和标题的组合展示了品牌形象，搜索按钮提供了快速查找藏品的入口。

OpenHarmony首页结构

在OpenHarmony端，我们使用Scroll组件实现首页的滚动布局。

// ohos/entry/src/main/ets/pages/HomePage.ets
@Entry
@Component
struct HomePage {
  build() {
    Scroll() {
      Column() {
        HomeHeader()
        BannerSection()
        QuickEntrySection()
        FeaturedSection()
      }
      .width('100%')
    }
    .scrollBar(BarState.Off)
    .backgroundColor('#F8F6F0')
  }
}

ArkTS的Scroll组件提供了原生的滚动能力，scrollBar(BarState.Off)隐藏了滚动条，使界面更加简洁。Column组件将各个区块垂直排列，每个区块都是独立的自定义组件。这种结构与Flutter端保持一致，便于维护和同步更新。

快捷入口区域

快捷入口让用户能够直接访问常用功能，采用网格布局展示。

// lib/screens/home/widgets/quick_actions.dart
class QuickActions extends StatelessWidget {
  const QuickActions({super.key});

  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: Container(
        padding: const EdgeInsets.all(16),
        child: GridView.count(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          crossAxisCount: 4,
          children: const [
            QuickActionItem(icon: Icons.history, label: '朝代'),
            QuickActionItem(icon: Icons.palette, label: '纹饰'),
            QuickActionItem(icon: Icons.museum, label: '博物馆'),
            QuickActionItem(icon: Icons.school, label: '课程'),
          ],
        ),
      ),
    );
  }
}

SliverToBoxAdapter将普通Widget转换为Sliver，使其能够在CustomScrollView中使用。GridView.count创建固定列数的网格，shrinkWrap使网格高度自适应内容，NeverScrollableScrollPhysics禁用网格自身的滚动，避免与外层滚动冲突。四个快捷入口分别对应朝代浏览、纹饰分类、博物馆导览和学习课程。

精选藏品区域

精选藏品区域展示编辑推荐的青花瓷精品，采用横向滚动的卡片列表。

// lib/screens/home/widgets/featured_collection.dart
class FeaturedCollection extends StatelessWidget {
  const FeaturedCollection({super.key});

  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Padding(
            padding: EdgeInsets.all(16),
            child: Text('精选藏品',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              )),
          ),
          SizedBox(
            height: 200,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 5,
              itemBuilder: (context, index) {
                return const FeaturedCard();
              },
            ),
          ),
        ],
      ),
    );
  }
}

区域标题使用较大的字号和粗体，突出显示。ListView.builder的scrollDirection设为Axis.horizontal实现横向滚动，这种布局方式在有限的屏幕空间内展示更多内容。itemBuilder懒加载机制确保只渲染可见的卡片，优化了性能。

OpenHarmony精选区域

在OpenHarmony端实现相同的精选藏品区域。

// ohos/entry/src/main/ets/components/FeaturedSection.ets
@Component
export struct FeaturedSection {
  build() {
    Column() {
      Text('精选藏品')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ left: 16, top: 16 })
      
      List({ space: 12 }) {
        ForEach([1, 2, 3, 4, 5], (item: number) => {
          ListItem() {
            FeaturedCard()
          }
        })
      }
      .listDirection(Axis.Horizontal)
      .height(200)
      .padding({ left: 16 })
    }
    .alignItems(HorizontalAlign.Start)
  }
}

ArkTS的List组件通过listDirection(Axis.Horizontal)设置为横向列表。space参数定义了列表项之间的间距。ForEach循环渲染五个精选卡片，每个卡片包裹在ListItem中。alignItems(HorizontalAlign.Start)确保标题左对齐，与整体设计风格一致。

总结

本篇文章详细介绍了青花瓷App首页的布局设计，包括应用栏、快捷入口和精选藏品等核心区块。通过Flutter和OpenHarmony双端的实现，我们建立了一个结构清晰、视觉优雅的首页。下一篇文章将深入轮播图组件的开发细节。欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net