在Flutter中创建一页内的两个列表视图,可以使用ListView和GridView来实现。
ListView是一个滚动的列表视图,可以垂直或水平滚动。要在Flutter中创建一页内的两个ListView,可以将它们放在一个Column中,每个ListView占据Column的一部分。以下是一个示例代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Two ListViews'),
),
body: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
),
),
Expanded(
child: ListView.builder(
itemCount: 5,
itemBuilder: (context, index) {
return ListTile(
title: Text('Another Item $index'),
);
},
),
),
],
),
),
);
}
}
在上面的示例中,我们使用了两个Expanded小部件来确保每个ListView占据相等的空间。您可以根据需要调整Expanded小部件的大小。
GridView是一个网格视图,可以在一页内显示多个项目。要在Flutter中创建一页内的两个GridView,可以将它们放在一个Column中,每个GridView占据Column的一部分。以下是一个示例代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Two GridViews'),
),
body: Column(
children: [
Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: 10,
itemBuilder: (context, index) {
return GridTile(
child: Container(
color: Colors.blue,
child: Center(
child: Text('Item $index'),
),
),
);
},
),
),
Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: 5,
itemBuilder: (context, index) {
return GridTile(
child: Container(
color: Colors.green,
child: Center(
child: Text('Another Item $index'),
),
),
);
},
),
),
],
),
),
);
}
}
在上面的示例中,我们使用了两个Expanded小部件来确保每个GridView占据相等的空间。我们还使用了SliverGridDelegateWithFixedCrossAxisCount来指定每行的项目数量。
这是在Flutter中创建一页内的两个列表视图的基本方法。您可以根据自己的需求进行调整和定制。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云