實(shí)驗(yàn)一些常用的 Gridview 功能 --- 代碼Github地址
Gridview 實(shí)驗(yàn)
Flutter 學(xué)習(xí)之路第五次實(shí)驗(yàn)瞬测，實(shí)驗(yàn)了 Gridview 常用的一些功能饺饭，用 Gridview 實(shí)現(xiàn)單詞軟件的一個(gè)基礎(chǔ)功能敌呈。
- 設(shè)置 gridview 各個(gè)屬性設(shè)置（間距，每行個(gè)數(shù)昆咽，長(zhǎng)寬比）
- 自定義 item, 以及 gridview item 點(diǎn)擊事件
- 動(dòng)態(tài)添加 gridview 的 item
設(shè)置 gridview 各個(gè)屬性設(shè)置（間距惜犀，每行個(gè)數(shù)，長(zhǎng)寬比）
- 用 crossAxisCount 來(lái)設(shè)置每行個(gè)數(shù)
- 用 crossAxisSpacing 設(shè)置水平間隙
- 用 mainAxisSpacing 設(shè)置上下間隙
- 用 childAspectRatio 來(lái)設(shè)置寬高比例
child: GridView.count(
// 每行有幾個(gè)子控件
crossAxisCount: 2,
// 水平子Widget之間間距
crossAxisSpacing: 10.0,
// 設(shè)置上下間隙
mainAxisSpacing: 8.0,
// 子Widget寬高比例
childAspectRatio: 2.0,
children: List.generate(listNumber, (index) {
return gridItem(context, index);
}),
),
自定義 item, 以及 gridview item 點(diǎn)擊事件
這兩個(gè)一起寫(xiě)是因?yàn)槁碜颍瑢?shí)際上竞帽，item 點(diǎn)擊是建立在自定義 item 上的，能自定義 item 了就能點(diǎn)擊了鸿捧。
自定義一個(gè) gridItem 的 Widget
Widget gridItem (BuildContext context, int _index) {
int index=_index%words.length;
return Container(
alignment: Alignment.center,
child: GestureDetector(
onTap: () {
setState(() {
String temp=words[index];
words[index]=translations[index];
translations[index]=temp;
});
},
child: Text(
words[index],
style: TextStyle(
fontSize: 28,
color: Colors.white,
),
),
),
color:myColor,
);
}
用 List.generate 加載自定義的 gridItem
Widget gridViewSection = Builder(
builder: (context) => Container(
margin: EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 5.0),
height: 600.0,
child: GridView.count(
// 每行有幾個(gè)子控件
crossAxisCount: 2,
// 水平子Widget之間間距
crossAxisSpacing: 10.0,
// 水平子Widget之間間距
mainAxisSpacing: 8.0,
// 子Widget寬高比例
childAspectRatio: 2.0,
children: List.generate(listNumber, (index) {
return gridItem(context, index);
}),
),
)
);
動(dòng)態(tài)添加 gridview 的 item
這個(gè)和之前寫(xiě) listview 的動(dòng)態(tài)添加套路差不多屹篓，就是改變下面這個(gè) listNumber 的值，就可以完成動(dòng)態(tài)添加.
children: List.generate(listNumber, (index) {
return gridItem(context, index);
}),
同樣匙奴，別忘了用 setState
onTap: () {
setState(() {
String temp=words[index];
words[index]=translations[index];
translations[index]=temp;
});
},
