Flutter系列（九）ListView实现新闻列表和正文布局

摸金青年v

已于 2023-06-23 16:49:12 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter

于 2023-06-23 16:49:10 首次发布

本文链接：https://blog.csdn.net/sinat_41144773/article/details/131351127

本文介绍如何使用Flutter构建新闻应用，包括新闻列表和新闻正文的布局。重点讲解了ListView.separated、ListTile、Scrollbar和SingleChildScrollView等组件的使用，以及解决大标题与小标题间距问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础工程：

Flutter系列（四）底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客

相关文章:

Flutter系列（七）ListView 图文列表详解_flutter 图文列表_摸金青年v的博客-CSDN博客

一、前言

本文用flutter实现新闻app，新闻列表和新闻正文布局，效果展示如下图：

二、使用的组件

ListView.separated 带分割线的ListView
ListTile 设置每条新闻的布局
Scrollbar 给它的子组件添加页面滚动条，展示浏览进度
SingleChildScrollView 给它的子组件添加滚动效果，而且组合Expanded组件，可以添加固定在页面上顶部或底部的工具栏

三、完整代码

3.1 新闻列表 recommend.dart

import 'package:flutter/material.dart';
import 'package:flutter_play/animationUtile.dart';
import 'package:flutter_play/article.dart';

/*推荐页*/
class RecommendPage extends StatefulWidget {
  @override
  State<RecommendPage> createState() => _RecommendPage();
}

class _RecommendPage extends State<RecommendPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scrollbar(
        child: ListView.separated(
          itemCount: listData.length,  //条目个数：获取数据的个数
          separatorBuilder: (context, index) { // <-- SEE HERE
            return const Divider();
          },  //分割线必要参数
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: (){
                Navigator.of(context).push(showPageFromRight(ArticlePage())); //点击跳转到新闻详情
              },
              child: ListTile(
                title: Text(listData[index]["title"]), //大标题
                subtitle: Column(
                  crossAxisAli