本文首發於公眾號「劉望舒」
ReactNative入門系列 React Native元件 Flutter基礎系列
前言
我們知道Widget的分類有很多種，比如：Basics、Material Components、Cupertino、Scrolling等等，在前面的文章我介紹了Basics和Material Components，這一篇講一下Scrolling分類中比較常用的ListView、GridView、PageView。
1 ListView
ListView可以說是Flutter中最常用的Scrolling Widget。 ListView有四種建構函式：
- 預設建構函式ListView。
- ListView.builder，適用於具有大量（或無限）列表項。
- ListView.separated，可以配置分割線，適用於具有固定數量列表項的ListView。
- ListView.custom，提供了自定義子Widget的能力。
1.1 預設建構函式
用預設建構函式的方式來實現一個簡單的列表。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('ListView示例'),
),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.access_time),
title: Text('第1行'),
),
ListTile(
leading: Icon(Icons.access_time),
title: Text('第2行'),
),
],
),
),
);
}
}
複製程式碼ListTile是Material Components中的Widget，通常用於填充ListView，可以滿足基本的圖片+文字的列表需求。
1.2 ListView.builder建立
如果要展示大量列表項，可以使用ListView.builder。
import 'package:flutter/material.dart';
void main() => runApp(MyApp(
items: new List<String>.generate(300, (i) => "第$i行"), //1
));
class MyApp extends StatelessWidget {
final List<String> items;
MyApp({@required this.items});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('ListView示例'),
),
body: ListView.builder( //2
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.access_time),
title: Text('${items[index]}'),
);
},
),
),
);
}
}
複製程式碼在註釋1生成300個資料，並將其傳入到MyApp中，註釋2處通過ListView.builder建立ListView，最終會通過ListTile來顯示每一個列表項。
1.3 ListView.separated建立
import 'package:flutter/material.dart';
void main() => runApp(MyApp(
items: new List<String>.generate(300, (i) => "第$i行"),
));
class MyApp extends StatelessWidget {
final List<String> items;
MyApp({@required this.items});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test',
home: Scaffold(
appBar: AppBar(
title: Text('ListView示例'),
),
body: ListView.separated(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.access_time),
title: Text('${items[index]}'),
);
},
separatorBuilder: (context, index) {//1
return Container(
constraints: BoxConstraints.tightFor(height: 1),
color: Colors.black45,
);
},
),
),
);
}
}
複製程式碼這種建立方式和ListView.builder類似，有個最大的不同就是可以通過註釋1處的separatorBuilder來設定分割線以及分割線的樣式。
2 GridView
GridView的使用方法和ListView類似，它有五種建構函式：
- 預設建構函式GridView。
- GridView.count：在橫軸方向上具有固定數量的GridView。
- GridView.extent：在橫軸方向上具有最大範圍的GridView。
- GridView.builder：適用於具有大量（或無限）列表項。
- GridView.custom：提供了自定義子Widget的能力。
這裡以第2種建構函式為例。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
title: new Text('GridView示例'),
),
body: GridView.count(
crossAxisCount: 3, //1
children: <Widget>[
ListTile(
title: Text('item1'),
),
ListTile(
title: Text('item2'),
),
ListTile(
title: Text('item3'),
),
ListTile(
title: Text('item4'),
),
ListTile(
title: Text('item5'),
),
ListTile(
title: Text('item6'),
),
ListTile(
title: Text('item7'),
),
ListTile(
title: Text('item8'),
),
ListTile(
title: Text('item9'),
),
],
),
),
);
}
}
複製程式碼註釋1處的crossAxisCount用於設定橫軸item的數量。效果如下圖所示：
3 PageView
PageView是一個可逐頁滾動的列表，和Android中ViewPage類似。 PageView有三種建構函式：
- 預設建構函式PageView
- PageView.builder：適用於具有大量（或無限）列表項。
- PageView.custom：提供了自定義子Widget的能力。
以預設建構函式為例，程式碼如下所示。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('PageView示例'),
),
body: PageView(
onPageChanged: (index) {//1
print('當前為第 $index 頁');
},
children: <Widget>[
ListTile(
title: Text('第0頁'),
),
ListTile(
title: Text('第1頁'),
),
ListTile(
title: Text('第2頁'),
),
],
),
),
);
}
}
複製程式碼通過註釋1處的onPageChanged屬性可以得知當前滑動到了第幾頁。
總結
本文並沒有介紹每個Widget的建構函式，那樣的話就不是一篇文章能寫下的了，也沒有必要，我們掌握了其中一種建構函式基本就可以舉一反三了。Scrolling Widget還包含了一些其他Widget，比如：NestedScrollView、Scrollbar、CustomScrollView、NotificationListener等等，就需要去自行檢視官方文件了：flutter.dev/docs/develo…
