flutter 写一个知识付费类的主页

以下是一个简单的知识付费类的主页设计，包括顶部导航栏、搜索框、分类列表和推荐课程。

import 'package:flutter/material.dart';

class KnowledgePayPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('知识付费'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.all(16),
              child: Text(
                '全部分类',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              height: 100,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  _buildCategoryItem('IT', Icons.computer),
                  _buildCategoryItem('设计', Icons.palette),
                  _buildCategoryItem('语言', Icons.language),
                  _buildCategoryItem('商业', Icons.business),
                  _buildCategoryItem('健康', Icons.favorite),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.all(16),
              child: Text(
                '热门推荐',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
            ),
            _buildCourseItem(
              'Flutter 从入门到实战',
              'https://picsum.photos/200/300',
              '张三',
              4.5,
              199,
            ),
            _buildCourseItem(
              'Python 数据分析与处理',
              'https://picsum.photos/200/300',
              '李四',
              4.8,
              299,
            ),
            _buildCourseItem(
              '前端开发高级进阶',
              'https://picsum.photos/200/300',
              '王五',
              4.6,
              399,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCategoryItem(String title, IconData icon) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 8),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          CircleAvatar(
            child: Icon(icon),
          ),
          SizedBox(height: 8),
          Text(title),
        ],
      ),
    );
  }

  Widget _buildCourseItem(
      String title, String imageUrl, String author, double rating, int price) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 120,
            height: 80,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              image: DecorationImage(
                image: NetworkImage(imageUrl),
                fit: BoxFit.cover,
              ),
            ),
          ),
          SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 8),
                Text(
                  author,
                  style: TextStyle(color: Colors.grey),
                ),
                SizedBox(height: 8),
                Row(
                  children: [
                    Icon(
                      Icons.star,
                      color: Colors.orange,
                      size: 16,
                    ),
                    SizedBox(width: 4),
                    Text(
                      rating.toString(),
                      style: TextStyle(color: Colors.grey),
                    ),
                    SizedBox(width: 16),
                    Text(
                      '￥$price',
                      style: TextStyle(fontSize: 16, color: Colors.red),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

效果如下：