1. 代码规范

前端

2023-12-01 09:24:56

一眼Flutter：代码规范、业务代码组织、新闻首页实现

在这个 Flutter 教程系列的第 6 部分中，我们将深入探讨代码规范、业务代码组织以及如何实现新闻首页。

Flutter 遵循 Dart 语言的代码规范，包括：

使用空格缩进（4 个空格）
使用分号分隔语句
避免使用 null 检查
遵循命名约定（例如，小写字母和下划线）

一个良好的业务代码组织结构对于代码的可维护性和可读性至关重要。我们将采用以下结构：

lib/main.dart: 应用的入口点
lib/models: 数据模型
lib/services: 数据服务
lib/ui: 用户界面
lib/utils: 实用程序函数

我们的新闻首页将包含：

一个 ListView，显示新闻文章标题
一个 FloatingActionButton，用于刷新新闻列表

以下是实现代码：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:http/http.dart' as http;

final newsProvider = StateProvider<List<String>>((ref) => []);

class NewsPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final news = ref.watch(newsProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('News'),
      ),
      body: ListView.builder(
        itemCount: news.length,
        itemBuilder: (context, index) => ListTile(
          title: Text(news[index]),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final response = await http.get(Uri.parse('https://example.com/news'));
          final news = jsonDecode(response.body) as List<String>;
          ref.read(newsProvider.notifier).state = news;
        },
      ),
    );
  }
}