ListView 作为一个常用组件,需要经常联系,下面是垂直滚动:
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyApp> {
List<String> NAMES = [
'赵',
'钱',
'孙',
'李',
'周',
'吴',
'郑',
'王',
'冯',
'陈',
'楚',
'魏',
'蒋',
'沈',
'韩',
'杨'
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Tabbed AppBar'),
),
body: ListView(
//改变滚动方向
//scrollDirection: Axis.horizontal,
scrollDirection: Axis.vertical,
children: _myList(),
),
),
);
}
List<Widget> _myList() {
return NAMES.map((name) => _item(name)).toList();
}
Widget _item(String name) {
return Container(
height: 80,
margin: EdgeInsets.only(bottom: 3),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.teal),
child: Text(
name,
style: TextStyle(color: Colors.white, fontSize: 16),
),
);
}
}
下面是水平滚动,只需要设置 scrollDirection 方向和样式即可:
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyApp> {
List<String> NAMES = [
'赵',
'钱',
'孙',
'李',
'周',
'吴',
'郑',
'王',
'冯',
'陈',
'楚',
'魏',
'蒋',
'沈',
'韩',
'杨'
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Tabbed AppBar'),
),
body: ListView(
//改变方向
scrollDirection: Axis.horizontal,
// scrollDirection: Axis.vertical,
children: _myList(),
),
),
);
}
List<Widget> _myList() {
return NAMES.map((name) => _item(name)).toList();
}
Widget _item(String name) {
return Container(
width: 80,
margin: EdgeInsets.only(right: 3),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.teal),
child: Text(
name,
style: TextStyle(color: Colors.white, fontSize: 16),
),
);
}
}