在 Flutter 中滚动时如何阻止我的 ListView 的内容超出其边界？

Question

我的 Flutter 应用程序中的 ListView 有一个奇怪的问题。

我有一个 ListView 位于 220 像素高的 SizedBox 中。当列表项超过可用高度时，它们会溢出到周围的屏幕元素中。

奇怪的是，ListTile 的一个属性确实可以剪辑，这就是标题！但其他所有东西，颜色和形状等......都会渗入屏幕的其余部分，所以我得到了一大堆蓝色盒子，超出了我的容器。

谁能告诉我如何在遇到容器边缘时拥有整个 ListTile 剪辑？

请参考屏幕截图以了解我的意思，我会将我的代码粘贴在图片下方

这是我的构建方法...

    @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          elevation: 0,
          backgroundColor: Colors.transparent,
          leading: const CloseButton(),
          actions: [
            ElevatedButton.icon(
              label: const Text('SAVE'),
              icon: const Icon(Icons.done),
              onPressed: () async {
                Navigator.pop(context);
                widget.resolution?.wasSaved = true;
                setState(() {
                  resolution.title = titleController.text;
                });
                widget.onSaved(resolution);
              },
              style: ElevatedButton.styleFrom(
                primary: Colors.transparent,
                elevation: 0,
              ),
            ),
          ],
        ),
        body: Container(
          // height: size.height,
          padding: const EdgeInsets.all(12),
          child: Column(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('RESOLUTION', style: kInputFieldHeader),
                  const SizedBox(height: 4),
                  Card(
                    elevation: 2,
                    child: TextFormField(
                      style: kInputFieldText,
                      controller: titleController,
                      decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          suffixIcon: titleController.text.isEmpty
                              ? Container(
                                  width: 0,
                                )
                              : IconButton(
                                  onPressed: () => titleController.clear(),
                                  icon: Icon(Icons.close))),
                      onFieldSubmitted: (fieldText) {
                        setState(() {
                          resolution.title = fieldText;
                        });
                        ;
                      },
                      validator: (value) => value != null && value.isEmpty
                          ? 'Please enter something'
                          : null,
                    ),
                  ),
                  DatePickers(
                    resolution: resolution,
                    startDateCallback: (startDate) {
                      setState(() {
                        resolution.startDate = startDate;
                      });
                    },
                    endDateCallback: (endDate) {
                      setState(() {
                        resolution.endDate = endDate;
                      });
                    },
                  ),
                  CustomColorPicker(
                    resolution: resolution,
                    colorCallback: (color) =>
                        setState(() => resolution.color = color),
                  ),
                  CustomProgressIndicator(
                      resolution: resolution, isCommitment: false),
                ],
              ),
              Expanded(
                child: Stack(
                  children: [
                    Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text('COMMITMENTS', style: kInputFieldHeader),
                        const SizedBox(height: 10),
                        Expanded(
                          child: SizedBox(
                            height: 220,
                            child: Container(
                              child: commitments.isNotEmpty
                                  ? _buildCommitmentsList()
                                  : _buildEmptyCommitments(),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(4),
                                border:
                                    Border.all(width: 1, color: Colors.grey),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                    Positioned(
                        bottom: 10,
                        right: 10,
                        child: FloatingActionButton(
                            heroTag: const Text('newCommitment'),
                            child: const Icon(Icons.add, size: 30),
                            onPressed: () => _commitmentScreenNew())),
                  ],
                ),
              ),
              TextButton(
                  onPressed: () {
                    Navigator.pop(context);
                    widget.onDeleted(resolution);
                  },
                  child: const Text(
                    'DELETE RESOLUTION',
                  )),
            ],
          ),
        ),
      ),
    );
  }

这是 listView 构建器方法...

  _buildCommitmentsList() {
    return ListView.builder(
      itemCount: commitments.length,
      physics: const BouncingScrollPhysics(),
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
          child: ListTile(
            title: Text(commitments[index].description),
            tileColor: resolution.color,
            onTap: () => _commitmentScreenEdit(commitments[index]),
            onLongPress: () => _removeCommitment(commitments[index]),
          ),
        );
      },
    );
  }

任何帮助将不胜感激:)

Answer 1

仅作记录，我最终通过用彩色容器替换 ListTiles 解决了这个问题。

Answer 2

对于遇到此问题的任何人，您可以将您的

ListTile

包裹在

Card

小部件中以防止它。

Card(child: ListTile(....))