先看GridView传参
GridView({
super.key,
super.scrollDirection,
super.reverse,
super.controller,
super.primary,
super.physics,
super.shrinkWrap,
super.padding,
required this.gridDelegate,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
super.cacheExtent,
List<Widget> children = const <Widget>[],
int? semanticChildCount,
super.dragStartBehavior,
super.clipBehavior,
super.keyboardDismissBehavior,
super.restorationId,
})
横纵向列表具体实现:
import 'package:flutter/material.dart';
const CITY_LIST = [
'日本',
'台湾',
'秦皇岛',
'宁波',
'青岛',
'北京',
'澳门',
'honggong',
'日本',
'台湾',
'秦皇岛',
'宁波',
'青岛',
'北京',
'澳门',
'honggong',
'青岛',
'北京',
'澳门',
'honggong',
];
class SeachPage extends StatefulWidget {
@override
_SeachPageState createState() => _SeachPageState();
}
class _SeachPageState extends State<SeachPage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: const Text('city'),
),
body: GridView.count(
crossAxisCount: 3, //每行个数
children: _childList(),
));
}
List<Widget> _childList() {
return CITY_LIST.map((city) => _item(city)).toList();
}
}
Widget _item(String city) {
return Container(
height: 40,
// width: 100,
margin: const EdgeInsets.only(bottom: 5),
alignment: Alignment.center,
decoration: const BoxDecoration(color: Colors.teal),
child: Text(
city,
style: const TextStyle(color: Colors.white, fontSize: 20),
));
}
小结
这里只是简单使用,要相了解更多以此为引,快去探索吧