如何在 Flutter 中将 ListView 放入 Card 而不溢出屏幕？

Question

我正在构建一个个人使用的移动应用程序。在此页面中，我想要一些卡片，其中一张卡片包含一个 AppBar 和一个 ListView.builder()。理想情况下，一旦列表变得太大，ListView 就可以滚动。 这是两张截图。

我尝试过将不同的组件包装在 Centers、Flexibles 等中，但我对此还不够了解。

这是该页面的代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:timetablepp/objectbox.g.dart';

class DashboardPage extends StatefulWidget {
  const DashboardPage({super.key});

  @override
  State<DashboardPage> createState() => _DashboardPageState();
}

class _DashboardPageState extends State<DashboardPage> {
  @override
  Widget build(BuildContext context) {
    AppBar dashboardAppBar = AppBar(
      title: Text('Main Page'),
      backgroundColor: Colors.blue[100],

      /*actions: <Widget>[
    PopupMenuButton(itemBuilder: itemBuilder)
  ],*/
    );

    Card upcomingCard = Card(
      margin: const EdgeInsets.all(20.0),
      color: Colors.white,
      elevation: 2.0,
      child: ListTile(
        isThreeLine: true,
        title: Text("Upcoming"),
        subtitle: Text(
            "TODO overdue tasks, TODO due today, TODO due tomorrow\nTODO upcoming Tasks\nTODO upcoming exams"),
      ),
    );

    Card subjectsCard = Card(
      margin: const EdgeInsets.all(20.0),
      color: Colors.white,
      elevation: 2.0,
      child: Column(
        children: [
          AppBar(
            title: Text("Subjects"),
          ),
          SingleChildScrollView(
            child: Column(
              children: [
                ListView.builder(
                    shrinkWrap: true,
                    itemCount: 8, 
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text("TODO $index"),
                      );
                    })
              ],
            ),
          )
        ],
      ),
    );

    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: dashboardAppBar,
      body: Column(
        children: [
          Center(
            child: upcomingCard,
          ),
          Center(
            child: subjectsCard,
          )
        ],
      ),
    );
  }
}

Answer 1

当前，您的代码的方式是，

subjectsCard

有一个

SingleChildScrollView

。所以，只有 that 是可滚动的。

我会在

main

内容中添加 SingleChildScrollView（意思是

body

的

Scaffold

）。

使用您的代码示例：

class DashboardPage extends StatefulWidget {
  const DashboardPage({super.key});

  @override
  State<DashboardPage> createState() => _DashboardPageState();
}

class _DashboardPageState extends State<DashboardPage> {
  @override
  Widget build(BuildContext context) {
    AppBar dashboardAppBar = AppBar(
      title: Text('Main Page'),
      backgroundColor: Colors.blue[100],

      /*actions: <Widget>[
    PopupMenuButton(itemBuilder: itemBuilder)
  ],*/
    );

    Card upcomingCard = Card(
      margin: const EdgeInsets.all(20.0),
      color: Colors.white,
      elevation: 2.0,
      child: ListTile(
        isThreeLine: true,
        title: Text("Upcoming"),
        subtitle: Text(
            "TODO overdue tasks, TODO due today, TODO due tomorrow\nTODO upcoming Tasks\nTODO upcoming exams"),
      ),
    );

    Card subjectsCard = Card(
      margin: const EdgeInsets.all(20.0),
      color: Colors.white,
      elevation: 2.0,
      child: Column(
        children: [
          AppBar(
            title: Text("Subjects"),
          ),
          SingleChildScrollView(
            child: Column(
              children: [
                ListView.builder(
                    shrinkWrap: true,
                    itemCount: 8,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text("TODO $index"),
                      );
                    })
              ],
            ),
          )
        ],
      ),
    );

    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: dashboardAppBar,
      body: SingleChildScrollView(
        // Add a SingleChildScrollView to the body
        child: Column(
          children: [
            Center(
              child: upcomingCard,
            ),
            Center(
              child: subjectsCard,
            )
          ],
        ),
      ),
    );
  }
}