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增加图片和文字的间距
  @override
  Widget 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});

  @override
  State<ListPoem> createState() => _ListPoemState();
}

class _ListPoemState extends State<ListPoem>  {

  ScrollController _scrollController = ScrollController(); //listview 的控制器

  void myclick() {
    print('按钮被点击过了');
  }

  ///sizeBox增加图片和文字的间距
  @override
  Widget 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的item
  Widget _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);
    }
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getHttp();
  }



  @override
  void dispose() {
    //_scrollController.dispose();
    super.dispose();
  }

  @override
  Widget 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 Expanded
                child: content,
              ),

              ],

          ),
      ),
    );
  }

}

 

 

二，测试效果: