【Flutter 程式設計入門實戰 30 天】Day 24:ListView 列表元件


【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言,開發 Android 和 iOS APP 應用程式。

哈囉~大家好,我是 KT ,今天實戰第二十四天,KT 將為大家來介紹,ListView 列表元件。

ListView 列表元件

ListView 列表元件可以透過 scrollDirection 屬性來改變垂直或水平滾動顯示列表資料,通常搭配 ListTile 一起使用。當需要大量資料時建議使用 ListView.builder 來建立列表資料。
ListView 和 ListView.builder 最大的差異是 ListView 是一次建立完所有列表資料,如果記憶體沒有管理好很容易造成APP閃退,ListView.builder 則是當元件滾動到螢幕當下才進行創建。

範例:使用 ListView 垂直顯示列表資料

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('HKT線上教室'),
      ),
      body: HomePage(),
    ));
  }
}

class HomePage extends StatelessWidget {
  //列表集合資料
  List<Widget> list = <Widget>[
    ListTile(
      title: Text(
        '測試標題一',
        style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
      ),
      subtitle: Text('測試內容一'),
      leading: Icon(
        Icons.event_seat,
        color: Colors.blue,
      ),
    ),
    ListTile(
      title: Text(
        '測試標題二',
        style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
      ),
      subtitle: Text('測試內容二'),
      leading: Icon(
        Icons.event_seat,
        color: Colors.blue,
      ),
    ),
    ListTile(
      title: Text(
        '測試標題三',
        style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
      ),
      subtitle: Text('測試內容三'),
      leading: Icon(
        Icons.event_seat,
        color: Colors.blue,
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Center(
      //列表元件
      child: ListView(
        children: list,
      ),
    );
  }
}

執行畫面

範例:使用 ListView 垂直顯示「自定義樣式」列表資料

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('HKT線上教室'),
      ),
      body: HomePage(),
    ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      //列表元件
      child: ListView(
        children: <Widget>[
          Row(
            children: <Widget>[Text('測試資料'), Text('測試資料'), Text('測試資料')],
          ),
          Column(
            children: <Widget>[Text('測試資料'), Text('測試資料'), Text('測試資料')],
          ),
          Row(
            children: <Widget>[Text('測試資料'), Text('測試資料'), Text('測試資料')],
          )
        ],
      ),
    );
  }
}

執行畫面

範例:使用 ListView.builder 垂直顯示「大量」列表資料

透過資料產生器,產生大量資料
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('HKT線上教室'),
      ),
      body: HomePage(),
    ));
  }
}

class HomePage extends StatelessWidget {
  //透過資料產生器,產生資料
  final List<Product> listItems = new List<Product>.generate(500, (i) {
    return Product(
      name: '測試資料 $i',
      price: '售價:$i',
    );
  });

  @override
  Widget build(BuildContext context) {
    return Center(
        child: ListView.builder(
      itemCount: listItems.length,
      itemBuilder: (context, index) {
        return ListTile(
          leading: Icon(Icons.event_seat),
          title: Text('${listItems[index].name}'),
          subtitle: Text('${listItems[index].price}'),
        );
      },
    ));
  }
}

//產品資料
class Product {
  final String name;
  final String price;

  Product({this.name, this.price});
}

執行畫面


那今天就介紹到這邊囉~
順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。
我們明天見囉!!!掰掰~

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/
Background vector created by freepik
https://www.freepik.com

這個網誌中的熱門文章

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

nano 文字編輯器

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)

Android Studio 歷代版本下載點