2023-12-18|閱讀時間 ‧ 約 4 分鐘

[Flutter]ListView

可以透過scrollDirection來設定垂直或水平滾動列表資料。


垂直滾動

class HomePage extends StatelessWidget {
//列表集合資料
List<Widget> list = <Widget>[
ListTile(
title: Text(
'title1',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
subtitle: Text('subtitle1'),
),
ListTile(
title: Text(
'title2',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
subtitle: Text('subtitle12'),
),
];

@override
Widget build(BuildContext context) {
return Center(
//列表元件
child: ListView(
children: list,
),
);
}
}


水平滾動

class HomePage extends StatelessWidget {
//列表集合資料
List<Widget> list = <Widget>[
ListTile(
title: Text(
'title1',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
subtitle: Text('subtitle1'),
),
ListTile(
title: Text(
'title2',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
subtitle: Text('subtitle12'),
),
];

@override
Widget build(BuildContext context) {
return Center(
//列表元件
child: ListView(
scrollDirection: Axis.horizontal,
children: list,
),
);
}
}
分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.