Flutter新手必看：一步一步开发掘金App首页

2023-09-07 22:09:24

Flutter是一个用于构建跨平台移动应用的开源UI框架，凭借其简洁的语法、丰富的组件库以及强大的性能，在开发社区备受青睐。如果你想学习Flutter应用开发，那么仿掘金App首页是一个非常好的入门项目。

首先，你需要安装Flutter并创建一个新的Flutter项目。然后，按照以下步骤进行操作：

导入必要的库：

import 'package:flutter/material.dart';

创建一个新的类，继承自StatefulWidget：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

在_HomePageState类中，定义一个List<String>变量来存储标签数据，以及两个TextEditingController变量来存储搜索框中的内容：

class _HomePageState extends State<HomePage> {
  List<String> tags = ['Flutter', 'Dart', 'UI', 'UX', 'Mobile Development'];
  final TextEditingController searchController = TextEditingController();
  final TextEditingController tagController = TextEditingController();
}

在build方法中，构建整个页面的UI。这里，我们将使用ListView来展示标签，使用GridView来展示文章列表，并使用TextField来实现搜索功能：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('掘金App首页'),
    ),
    body: Column(
      children: [
        // 搜索栏
        TextField(
          controller: searchController,
          decoration: InputDecoration(
            hintText: '搜索文章',
            prefixIcon: Icon(Icons.search),
          ),
          onSubmitted: (value) {
            // 搜索文章
          },
        ),

        // 标签栏
        Container(
          height: 50,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: tags.length,
            itemBuilder: (context, index) {
              return GestureDetector(
                onTap: () {
                  // 标签点击事件
                },
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                  margin: EdgeInsets.only(right: 10),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.blueGrey,
                  ),
                  child: Text(
                    tags[index],
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              );
            },
          ),
        ),

        // 文章列表
        Expanded(
          child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
            ),
            itemCount: 20,
            itemBuilder: (context, index) {
              return GestureDetector(
                onTap: () {
                  // 文章点击事件
                },
                child: Container(
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 2,
                        blurRadius: 4,
                        offset: Offset(0, 3),
                      ),
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '文章标题',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 10),
                      Text(
                        '文章摘要',
                        style: TextStyle(
                          fontSize: 14,
                          color: Colors.grey,
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
      ],
    ),
  );
}