flutter中的listview的使用

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("flutter demo"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.home,color: Colors.blue,size: 40,),
          title: Text(
            "大標題大標題大標題大標題大標題大標題大標題大標題",
            style: TextStyle(fontSize: 24),
          ),
          subtitle: Text("小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔"),
        ),
        ListTile(
          leading: Image.network("https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"),
          title: Text(
            "大標題大標題大標題大標題大標題大標題大標題大標題",
            style: TextStyle(fontSize: 24),
          ),
          subtitle: Text("小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔"),
        ),
        ListTile(
          title: Text(
            "大標題大標題大標題大標題大標題大標題大標題大標題",
            style: TextStyle(fontSize: 24),
          ),
          subtitle: Text("小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔"),
        ),
        ListTile(
          title: Text(
            "大標題大標題大標題大標題大標題大標題大標題大標題",
            style: TextStyle(fontSize: 24),
          ),
          subtitle: Text("小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔"),
        ),
      ],
    );
  }
}

動態列表實現的兩種方法：

listview動態列表數據：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("flutter demo"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  HomeContent({Key key}) : super(key: key);
  //動態列表數據：
  List<Widget> _getdata(){
    List<Widget> list=new List();
    for(var i=0;i<20;i++){
      list.add(ListTile(
        title: Text("我是$i 列表"),
      ));
    }
    return list.toList();
  }
  
  @override
  Widget build(BuildContext context) {
    return ListView(
      children:this._getdata(),
    );
  }
}

 

循環遍歷數據：

 

listData.dart

List listData=[
  {
    "title":"Candy Shop",
    "author":"小明",
    "imageUrl":"https://www.itying.com/images/flutter/1.png"
  },
  {
    "title":"Candy Shop",
    "author":"小明",
    "imageUrl":"https://www.itying.com/images/flutter/2.png"
  },
  {
    "title":"Candy Shop",
    "author":"小明",
    "imageUrl":"https://www.itying.com/images/flutter/3.png"
  },
  {
    "title":"Candy Shop",
    "author":"小明",
    "imageUrl":"https://www.itying.com/images/flutter/4.png"
  },{
    "title":"Candy Shop",
    "author":"小明",
    "imageUrl":"https://www.itying.com/images/flutter/5.png"
  }
];

import 'package:flutter/material.dart';
import 'package:flutter_testdemo001/res/listData.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("flutter demo"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  HomeContent({Key key}) : super(key: key);
  //自定義方法：
  List<Widget> _getListData() {
    var tempList=listData.map((value){
      return ListTile(
        leading: Image.network(value['imageUrl']),
        title: Text(value['title']),
        subtitle: Text(value['author']),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children:this._getListData(),
    );
  }
}

 ListView.builder的使用：

import 'package:flutter/material.dart';
import 'package:flutter_testdemo001/res/listData.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("flutter demo"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  //自定義方法：
  List list = new List();
  HomeContent() {
    for (var i = 0; i < 20; i++) {
      this.list.add("我是第$i 條");
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: this.list.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(this.list[index]),
        );
      },
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_testdemo001/res/listData.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("flutter demo"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  //自定義方法：
  Widget _getListData(context, index) {
    return ListTile(
      title: Text(listData[index]['title']),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: listData.length,
      itemBuilder: this._getListData,
    );
  }
}