ListView
ListView 是滚动组件,常用组件之一,用于展示大量数据的列表。
定义列表子项的样式
class ListItem extends StatelessWidget {
final String title;
const ListItem({
Key? key, required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
color: const Color(0x00000ddd),
child: Container(
height: 40,
alignment: Alignment.center,
child: Text(
title,
style: const TextStyle(color: Colors.white),
),
),
);
}
}
直接加载列表
return ListView(
children: const [
ListItem(title: "列表项1"),
ListItem(title: "列表项2"),
ListItem(title: "列表项3")
],
);
GridView
GridView是一个网格布局组件
class _YcHomeBodyState extends State<YcHomeBody> {
Widget build(BuildContext context) {
return GridView(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
// 设置只能显示3列,列直接间距是20,行间距是10
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing:20
),
children: [
_gridViewItem(
Colors.primaries[0]), // Colors.primaries[0] 是一个预定义的颜色列表,包含了一组基本的颜色
_gridViewItem(Colors.primaries[1]),
_gridViewItem(Colors.primaries[2]),
_gridViewItem(Colors.primaries[3]),
_gridViewItem(Colors.primaries[4]),
],
);
}
_gridViewItem(Color color) {
return Container(height: 50, color: color);
}
}
快速构建
GridView.builder
class _YcHomeBodyState extends State<YcHomeBody> {
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10), //每行最多显示3个,间距是10
itemBuilder: (context, index) {
// 子项的构造函数
return Container(
height: 50,
color: Colors.primaries[index % Colors.primaries.length]);
},
itemCount: 10, // 子项的个数
);
}
}
GridView.count
class _YcHomeBodyState extends State<YcHomeBody> {
Widget build(BuildContext context) {
return GridView.count(crossAxisCount: 3, children: List.generate(10, (i) {
return Container(
height: 30,
color: Colors.primaries[i % Colors.primaries.length],
margin: const EdgeInsets.all(10)
);
})
);
}
}
PageView
PageView是一个可以滚动的视图,通常用来实现类似于轮播图或者滑动切换页面的效果
滑动切换页面
class _YcHomeBodyState extends State<YcHomeBody> {
int _currentPageIndex = 0;
final PageController _pageController = PageController(initialPage: 0);
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
flex: 9,
child: PageView(
controller: _pageController,
onPageChanged: (index) {
setState(() {
_currentPageIndex = index;
});
},
children: const [
Center(
child: Text('Page 1'),
),
Center(
child: Text('Page 2'),
),
],
)),
Expanded(
flex: 1,
child: Container(
color: Colors.white70,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
setState(() {
_currentPageIndex = 0;
});
_pageController.animateToPage(_currentPageIndex,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: Icon(
Icons.home,
color: _currentPageIndex == 0 ? Colors.blue : Colors.grey,
),
),
GestureDetector(
onTap: () {
setState(() {
_currentPageIndex = 1;
});
_pageController.animateToPage(_currentPageIndex,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: Icon(
Icons.person,
color: _currentPageIndex == 1 ? Colors.blue : Colors.grey,
),
),
],
),
))
],
);
}
}
DataTable
DataTable控件显示表格数据,DataTable需要设置行和列
return Center(
child: DataTable(
border: TableBorder.all(color: Colors.blue),
// 列
columns: const [
DataColumn(label: Text('姓名')),
DataColumn(label: Text('年龄'))
],
//行
rows: const [
DataRow(cells: [
DataCell(Text('张三')),
DataCell(Text('15')),
]),
DataRow(cells: [
DataCell(Text('李四')),
DataCell(Text('15')),
]),
],
),
);
其他内容略。