本文首發(fā)于公眾號「后廠村碼農(nóng)」
ReactNative入門系列
React Native組件
Flutter基礎系列
前言
我們知道Widget的分類有很多種罢坝，比如：Basics廓握、Material Components、Cupertino嘁酿、Scrolling等等隙券，在前面的文章我介紹了Basics和Material Components，這一篇講一下Scrolling分類中比較常用的ListView闹司、GridView娱仔、PageView。
1 ListView
ListView可以說是Flutter中最常用的Scrolling Widget开仰。
ListView有四種構造函數(shù)：
- 默認構造函數(shù)ListView拟枚。
- ListView.builder，適用于具有大量（或無限）列表項众弓。
- ListView.separated恩溅，可以配置分割線，適用于具有固定數(shù)量列表項的ListView谓娃。
- ListView.custom脚乡，提供了自定義子Widget的能力。
1.1 默認構造函數(shù)
用默認構造函數(shù)的方式來實現(xiàn)一個簡單的列表。
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創(chuàng)建
如果要展示大量列表項锌订，可以使用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個數(shù)據(jù)，并將其傳入到MyApp中辆飘，注釋2處通過ListView.builder創(chuàng)建ListView啦辐，最終會通過ListTile來顯示每一個列表項。
1.3 ListView.separated創(chuàng)建
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,
);
},
),
),
);
}
}
這種創(chuàng)建方式和ListView.builder類似蜈项，有個最大的不同就是可以通過注釋1處的separatorBuilder來設置分割線以及分割線的樣式芹关。
2 GridView
GridView的使用方法和ListView類似，它有五種構造函數(shù)：
- 默認構造函數(shù)GridView紧卒。
- GridView.count：在橫軸方向上具有固定數(shù)量的GridView侥衬。
- GridView.extent：在橫軸方向上具有最大范圍的GridView。
- GridView.builder：適用于具有大量（或無限）列表項跑芳。
- GridView.custom：提供了自定義子Widget的能力轴总。
這里以第2種構造函數(shù)為例。
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的數(shù)量聋亡。效果如下圖所示：
3 PageView
PageView是一個可逐頁滾動的列表肘习，和Android中ViewPage類似际乘。
PageView有三種構造函數(shù)：
- 默認構造函數(shù)PageView
- PageView.builder：適用于具有大量（或無限）列表項坡倔。
- PageView.custom：提供了自定義子Widget的能力。
以默認構造函數(shù)為例脖含，代碼如下所示罪塔。
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的構造函數(shù)养葵，那樣的話就不是一篇文章能寫下的了征堪，也沒有必要，我們掌握了其中一種構造函數(shù)基本就可以舉一反三了关拒。Scrolling Widget還包含了一些其他Widget佃蚜，比如：NestedScrollView、Scrollbar着绊、CustomScrollView谐算、NotificationListener等等，就需要去自行查看官方文檔了：https://flutter.dev/docs/development/ui/widgets/scrolling
更多的內(nèi)容請關注我的獨立博客的知識體系:
http://liuwangshu.cn/system/
這里不僅分享大前端归露、Android洲脂、Java等技術，還有程序員成長類文章剧包。
