基础工程:
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(
crossAxisAlignment: CrossAxisAlignment.start, //左对齐
children: [
const SizedBox(height: 12), //设置title和subtitle的间距
Text(listData[index]["subtitle"], style: const Text