Just My Life & My Work

[Flutter] ListView Widget

將一系列資料顯示在螢幕上,是我們很常遇到的使用情境,在 iOS 上是叫做 TableView,而在 Flutter 則叫為 ListView,我們可以做出非常類似的 UI/UX。

ListView Widget 將很好使用。🤠

首先來看一次產生出資料介面:

/*
  Author: HappyMan
  Date: 2022/02/14
  Topic: ListView Class
 */
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('Happy List View'),
        ),
        body: ListView(
          padding: const EdgeInsets.all(20),
          // scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(
              height: 50,
              color: Colors.amber[600],
              child: const Center(child: Text('Entry A')),
            ),
            Container(
              height: 50,
              color: Colors.amber[400],
              child: const Center(child: Text('Entry B')),
            ),
            Container(
              height: 50,
              color: Colors.amber[100],
              child: const Center(child: Text('Entry C')),
            ),
          ],
        )
      ),
    );
  }
}

執行後顯示如最上兩張截圖。其中 scrollDirection 屬性可以設定是 Axis.horizontal 或 Axis.vertical,讓 ListView 直式或橫式捲動。

接著我們使用 ListView.builder 來顯示介面,它可以在需要顯示的時候,延遲創建介面(built lazily),且可以無限多個介面。

/*
  Author: HappyMan
  Date: 2022/02/14
  Topic: ListView Class
 */
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  final List<String> entryList = <String>['A', 'B', 'C'];
  final List<int> colorList = <int>[600, 400, 100];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Happy List View'),
        ),
        body: ListView.builder(
          // scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.all(20),
          itemCount: entryList.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 50,
              color: Colors.amber[colorList[index]],
              child: Center(child: Text('Entry ${entryList[index]}')),
            );
          }
        ),
      ),
    );
  }
}

顯示結果跟前者是一模一樣喔~

若我們想要有「分隔線」,則可以使用 ListView.separated,效果跟 ListView.builder 類似,其中多了 separatorBuilder 屬性。

/*
  Author: HappyMan
  Date: 2022/02/14
  Topic: ListView Class
 */
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  final List<String> entryList = <String>['A', 'B', 'C'];
  final List<int> colorList = <int>[600, 400, 100];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Happy List View'),
        ),
        body: ListView.separated(
          // scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.all(50),
          itemCount: entryList.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 50,
              color: Colors.amber[colorList[index]],
              child: Center(child: Text('Entry ${entryList[index]}')),
            );
          },
          separatorBuilder: (BuildContext context, int index) {
            return const Divider(
              height: 50,
              thickness: 2,
              indent: 50,
              color: Colors.green,
            );
          },
        ),
      ),
    );
  }
}

執行後顯示如下圖,分隔線可以設定粗細、顏色、高度等等。現在是用內建的 Divider,亦可自行設計分隔介面。

參考:

ListView class

ListView (Flutter Widget of the Week)

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

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚: