flutter:使用listview

一，代码：

model:

class ListItemModel {String author;String title;int id;ListItemModel(this.author,this.title, this.id) {}ListItemModel.fromJson(Map<String, dynamic>json):author=json["author"],title = json["title"],id = json["id"];Map<String, dynamic> toJson() {return {"author": author,"title": title,"id": id};}
}

listitem:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';class ListRowText extends StatelessWidget {final GestureTapCallback onPressed; //点击事件的回调，一旦设置后就不可变final String author;final String title;ListRowText({required this.onPressed, required this.author, required this.title});///sizeBox增加图片和文字的间距@overrideWidget build(BuildContext context) {return Container(margin: EdgeInsets.all(0),color: Colors.white,child: Container(width:560.w,height:160.w,margin: EdgeInsets.fromLTRB(20.w, 20.w, 20.w, 0),//color: Colors.cyan,decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(30.w)),color: Colors.grey.withAlpha(40),),child:Row(children:[_titleWrapper(context, title),_authorWrapper(context, author),]),),);}Widget _authorWrapper(BuildContext context, String text) {return Container(height: 160.w,width:200.w,margin: EdgeInsets.fromLTRB(0.w, 0, 0, 0),decoration: new BoxDecoration(color: Colors.yellow,),alignment: Alignment.centerLeft,child: Text(text,maxLines: 2,overflow: TextOverflow.ellipsis,style: Theme.of(context).textTheme.headlineMedium,),);}Widget _titleWrapper(BuildContext context, String text) {return Container(height: 160.w,width:450.w,margin: EdgeInsets.fromLTRB(20.w, 0, 0, 0),decoration: new BoxDecoration(color: Colors.red,),alignment: Alignment.centerLeft,child: Text(text,maxLines: 2,overflow: TextOverflow.ellipsis,style: Theme.of(context).textTheme.headlineMedium,),);}
}

list:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';import '../models/ListItemModel.dart';
import 'ListRowText.dart';class ListPoem extends StatefulWidget {//存放列表数据List<ListItemModel> listData=[];ListPoem({required this.listData});@overrideState<ListPoem> createState() => _ListPoemState();
}class _ListPoemState extends State<ListPoem>  {ScrollController _scrollController = ScrollController(); //listview 的控制器void myclick() {print('按钮被点击过了');}///sizeBox增加图片和文字的间距@overrideWidget build(BuildContext context) {return ListView.builder(scrollDirection: Axis.vertical,shrinkWrap: true,itemCount: widget.listData.length,itemBuilder: (BuildContext context, int index) {return getItem(context,index);},controller: _scrollController,);}Widget getItem(BuildContext context,int index) {return new GestureDetector(onTap: () {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('点击了第 $index 项 (GestureDetector)')),);},child:_buildRow(index),);}//构造list的itemWidget _buildRow(int index) {//非最后一行return ListRowText(onPressed: myclick,author:widget.listData[index].author,title:widget.listData[index].title);}
}

page:

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import '../models/ListItemModel.dart';
import 'dart:convert';
import 'package:flutter/widgets.dart';
import '../views/ListPoem.dart';
import '../views/ListRowText.dart';
class ListItemPage extends StatefulWidget {@override_MyList  createState()=> _MyList();
}//封装的动态页面类
class _MyList extends State<ListItemPage>{//当前第几页int _currentPage = 0;int _total = 1;//存放列表数据List<ListItemModel> _listData=[];//http方式获取数据Future<Null> getHttp() async{String url = 'http://www.lhdtest.net/list.php';print(url);try {var response = await Dio().get(url);print(response);//处理json到类中var resoMap=json.decode(response.toString());//_total = resoMap['data']['total'];//print("total:"+_total.toString());for (int i = 0; i < (resoMap['data']['list'].length); i++) {print("i:"+i.toString());var itemOne = resoMap['data']['list'][i];print(itemOne);ListItemModel itemObj = new ListItemModel(itemOne['author'],itemOne['title'], itemOne['id']);_listData.add(itemObj);}setState(() {});} catch (e) {print(e);}}@overridevoid initState() {// TODO: implement initStatesuper.initState();getHttp();}@overridevoid dispose() {//_scrollController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {var content;if (_listData.length == 0) {content = new Center(// 可选参数 child:child: new CircularProgressIndicator(),);} else {content = ListPoem(listData: _listData,);}return Scaffold(appBar: AppBar(title: Text('这是首页'),),body: Center(child:Column(children:[ElevatedButton(child: Text("下一页"),onPressed: () {print('将跳转到下一页');},),Expanded( // wrap in Expandedchild: content,),],),),);}}

 

 

二，测试效果: