带有"Table"小部件的SingleChildScrollView是可能的吗？

Question

我用3/5将屏幕一分为二。我添加了"表">小部件到底部。但我希望底部可以滚动。我添加了SingleChildScrollView，但它不起作用。我该怎么办？

void main() {
runApp(
MaterialApp(
home: HomePage(),
),
);
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
key: _scaffoldKey,
body: Stack(
children: <Widget>[
Column(
children: <Widget>[
Expanded(
flex: 3,
child: Stack(
children: <Widget>[
OpaqueImage(
imageUrl: "assets/images/matematik_sembolleri.jpg",
),
SafeArea(
child: Padding(
padding: const EdgeInsets.all(4),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Align(
alignment: Alignment.centerLeft,
child: IconButton(
icon: const Icon(Icons.menu),
color: Colors.white,
onPressed: () {
_scaffoldKey.currentState.openDrawer();
},
),
),
Align(
alignment: Alignment.topCenter,
child: Text(
"Pirekare Matematik",
textAlign: TextAlign.center,
style: headingTextStyle,
),
),
Align(
alignment: Alignment.centerRight,
child: IconButton(
icon: const Icon(Icons.star),
color: Colors.white,
onPressed: () {},
),
),
],
),
MyInfo(),
],
),
),
),
],
),
),

到目前为止，代码是针对屏幕顶部的，并且是固定的(您必须组合代码。(

下面的代码是屏幕底部的，我希望它们可以滚动

Expanded(
flex: 5,
child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.only(top: 30),
color: Colors.white,
child: Table(
children: [
TableRow(
children: [
GestureDetector(
onTap: () {},
child: ProfileInfoBigCard(
firstText: "Özel Ders Programı",
secondText:
"Seviyenize göre çalışma programı ayarlayın",
icon: Icon(
Icons.next_plan,
size: 16,
color: blueColor,
),
),
),
GestureDetector(
onTap: () {},
child: ProfileInfoBigCard(
firstText: "Konu Anlatım Videoları",
secondText:
"İstediğiniz konuya videoları izleyerek çalışın",
icon: Icon(
Icons.video_collection_rounded,
size: 16,
color: blueColor,
)),
),
],
),
TableRow(
children: [
GestureDetector(
onTap: () {},
child: ProfileInfoBigCard(
firstText: "Soru Tipleri",
secondText:
"Soru çözme yeteneğinizi arttırın",
icon: Icon(
Icons.text_snippet_rounded,
size: 16,
color: blueColor,
)),
),
GestureDetector(
onTap: () {},
child: ProfileInfoBigCard(
firstText: "Soru Cüzdanı",
secondText:
"Kaydetmek istediğiniz soruları cüzdanınıza ekleyin",
icon: Icon(
Icons.local_post_office,
size: 16,
color: blueColor,
),
),
),
],
),
TableRow(
children: [
GestureDetector(
onTap: () {},
child: ProfileInfoBigCard(
firstText: "Puan Tablosu",
secondText:
"Diğer öğrencilerle puanlarınızı karşılaştırın",
icon: Icon(
Icons.leaderboard,
size: 16,
color: blueColor,
),
),
),
GestureDetector(
onTap: () {},
child: ProfileInfoBigCard(
firstText: "Türkiye Geneli Sınav",
secondText:
"Diğer öğrencilerle aynı anda sınava girin",
icon: Icon(
Icons.map,
size: 16,
color: blueColor,
),
),
),
],
),
],
),
),
),
),
],
),
Positioned(
top: screenHeight * (3 / 8) - 60 / 2,
left: 16,
right: 16,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ProfileInfoCard(firstText: "54", secondText: "Net"),
SizedBox(
width: 10,
),
ProfileInfoCard(firstText: "543", secondText: "Puanınız"),
SizedBox(
width: 10,
),
ProfileInfoCard(firstText: "15", secondText: "Seviye"),
],
),
),
),
],
),
drawer: Drawer(
child: DrawerDosyasi(),
),
);
}
}

如果我不能使用Table，你有什么建议？

Answer 1

您可以为包装表的容器指定高度，并使用Listview包装表。现在可以滚动表行。

Expanded(
flex: 5,
child: SingleChildScrollView(
child: Container(
height: 80,
padding: const EdgeInsets.only(top: 30),
color: Colors.white,
child: ListView(
children: [
Table(
children: [
TableRow(
children: [
GestureDetector(
onTap: () {}, child: Text("heey")),
GestureDetector(
onTap: () {}, child: Text("heey")),
],
),
TableRow(
children: [
GestureDetector(
onTap: () {}, child: Text("heey")),
GestureDetector(
onTap: () {}, child: Text("heey")),
],
),
TableRow(
children: [
GestureDetector(
onTap: () {}, child: Text("heey")),
GestureDetector(
onTap: () {}, child: Text("heey")),
],
),
TableRow(
children: [
GestureDetector(
onTap: () {}, child: Text("heey")),
GestureDetector(
onTap: () {}, child: Text("heey")),
],
),
],
),
],
),
),
),
),