iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
Mobile Development

Dart & Flutter - 學寫App | 菜鳥筆記 | 堅持30天挑戰系列 第 9

Flutter 常用組件講解 | ListViewWidget | 動態清單

動態清單的使用 | 參數如何傳遞與接收?

動態清單的使用

  1. Dart 中 List 類型的使用
  • List 類型簡介, 可以簡單理解為 js 中的數組
  • 聲明 List 的 4 種方式
void main() => runApp(MyApp(
  items: new List()          // List() 什麼都不加, 非固定長度
  items: new List(3)         // List() 加數字, 固定字元長度
  items: new List<String>()  // 規定以字串形式傳遞
  items: [1, 2, 3, 4, 5]     // 直接賦值
));
  1. 傳遞和接受參數,實現動態列表基礎
  • 如何傳遞參數
  • 如何接受參數
  1. 動態列表案例製作
import 'package:flutter/material.dart';

void main() =>
    runApp(MyApp(items: new List<String>.generate(20, (i) => 'Item $i')));

class MyApp extends StatelessWidget {
  final List<String> items;

  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'IMooc Flutter Demo',
        home: Scaffold(
            appBar: new AppBar(
              title: new Text('ListView Widget'),
            ),
            body: new ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return new ListTile(title: new Text('${items[index]}'));
                })));
  }
}
list-items
list-items

上一篇
Flutter 常用組件講解 | ListViewWidget 補充
下一篇
Dart 語言 | 基本練習(上)
系列文
Dart & Flutter - 學寫App | 菜鳥筆記 | 堅持30天挑戰12

尚未有邦友留言

立即登入留言