點燈坊

失くすものさえない今が強くなるチャンスよ

ListView 顯示清單

Sam Xiao's Avatar 2024-10-30

ListView 適合顯示清單，且支援卷軸。

Version

Flutter 3.24

Flutter

overview01

  • Android 與 iOS 都成功使用 ListView 實現清單

ListView

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  void _showSnackBar(
    BuildContext context,
    String message,
  ) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(
      title: const Text('ListView'),
    );

    var listView = ListView(
      children: [
        ListTile(
          title: const Text('Item 1'),
          onTap: () => _showSnackBar(context, 'Item 1'),
        ),
        ListTile(
          title: const Text('Item 2'),
          onTap: () => _showSnackBar(context, 'Item 2'),
        ),
        ListTile(
          title: const Text('Item 3'),
          onTap: () => _showSnackBar(context, 'Item 3'),
        ),
      ],
    );

    return Scaffold(
      appBar: appBar,
      body: listView,
    );
  }
}

Line 23

var listView = ListView(
  children: [
    ListTile(
      title: const Text('Item 1'),
      onTap: () => _showSnackBar(context, 'Item 1'),
    ),
    ListTile(
      title: const Text('Item 2'),
      onTap: () => _showSnackBar(context, 'Item 2'),
    ),
    ListTile(
      title: const Text('Item 3'),
      onTap: () => _showSnackBar(context, 'Item 3'),
    ),
  ],
)
  • ListView：顯示清單
    • ListTile：顯示清單中每筆項目
      • title：設定顯示文字
      • onTap()：當點擊項目時觸發

Line 6

void _showSnackBar(
  BuildContext context,
  String message,
) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text(message),
    ),
  );
}
  • 當點擊每筆項目是使用 SnackBar 顯示

Conclusion

  • ListView 與 ListTile 會成對一起使用

# Flutter