Flutter Web 实战指南：高效构建文章列表与详情页面

2023-12-10 01:01:16

1. 前端页面布局

在 Flutter Web 中，您可以使用 Row 和 Column 组件来构建页面布局。Row 组件用于水平布局，Column 组件用于垂直布局。通过组合使用这两个组件，可以创建出各种各样的页面布局。

例如，以下代码创建了一个简单的文章列表页面布局：

Row(
  children: [
    Expanded(
      child: Column(
        children: [
          Text('文章列表'),
          ListView.builder(
            itemCount: 10,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('文章 $index'),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => ArticleDetailPage(index),
                    ),
                  );
                },
              );
            },
          ),
        ],
      ),
    ),
  ],
)

2. 数据获取与交互

在 Flutter Web 中，您可以使用 http 包来进行网络请求，获取文章列表和详情数据。

例如，以下代码从服务器获取文章列表数据：

Future<List<Article>> fetchArticles() async {
  final response = await http.get('https://example.com/articles');
  if (response.statusCode == 200) {
    return json.decode(response.body) as List<Article>;
  } else {
    throw Exception('Failed to load articles');
  }
}

3. 响应式布局

Flutter Web 支持响应式布局，这意味着您的应用可以在不同的屏幕尺寸上正常显示。您可以使用 MediaQuery 类来检测屏幕尺寸，并根据不同的屏幕尺寸调整布局。

例如，以下代码根据屏幕尺寸调整文章列表布局：

MediaQuery(
  data: MediaQuery.of(context),
  child: Row(
    children: [
      if (MediaQuery.of(context).size.width > 600)
        Expanded(
          child: Column(
            children: [
              Text('文章列表'),
              ListView.builder(
                itemCount: 10,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('文章 $index'),
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => ArticleDetailPage(index),
                        ),
                      );
                    },
                  );
                },
              ),
            ],
          ),
        ),
      Expanded(
        child: Column(
          children: [
            Text('文章详情'),
            Text('文章内容'),
          ],
        ),
      ),
    ],
  ),
)