为什么 ListView 小部件在滚动时会移出容器？

Question

我将一个 ListView 放置在具有一定高度的 Container 中，并且希望可滚动区域保留在该 Container 内。换句话说，滚动只会在该容器内完成，其余部分在滚动时将不可见。然而，如图所示，滚动的小部件延伸到容器之外，并且非常清晰可见。

我哪里可能出错了？

import 'package:complete_app/util/styles.dart';
import 'package:complete_app/view/base/title_block.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

import '../../../util/images.dart';
import '../../base/setting_button.dart';

class MeditationScreen extends StatelessWidget {

  final List<String> meditationMusicList = [
    "Meditasyon Müziği 1",
    "Meditasyon Müziği 2",
    "Meditasyon Müziği 3",
    "Meditasyon Müziği 4",
    "Meditasyon Müziği 5",
    "Meditasyon Müziği 6",
    "Meditasyon Müziği 7",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        body: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Stack(
              children: [
                Positioned(
                  top: 80,
                  right: 16,
                  child: Container(
                      child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        '14 Mart 2024',
                        style: poppinsSemiBold.copyWith(
                            fontSize: 14, color: Colors.white),
                      ),
                      Text(
                        'Bugün',
                        style: poppinsMedium.copyWith(
                            fontSize: 14, color: Theme.of(context).primaryColor),
                      ),
                    ],
                  )),
                ),
                Opacity(
                  opacity: 0.4,
                  child: Container(
                    height: 180,
                    width: double.infinity,
                    child: Image.asset(Images.meditationDarkBackground,
                        fit: BoxFit.cover),
                  ),
                ),
              ],
            ),
            SizedBox(height: 20),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: TitleBlock(title: "Günün Meditasyonu"),
            ),
            SizedBox(height: 10),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Text("Meditasyon zamanını ve konunuzu girerek istediğiniz meditasyon müziği eşliğinde konunuz üzerinde odaklanabilirsiniz", textAlign: TextAlign.center, style: poppinsRegular.copyWith(fontSize: 14, color: Colors.white),),
            ),
            Spacer(),
            Container(
              height: 265,
              width: double.infinity,
              color: Colors.amber,
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: ClipRect(
                child: ListView.separated(
                  clipBehavior: Clip.hardEdge,
                  shrinkWrap: true,
                  physics: ScrollPhysics(),
                  padding: const EdgeInsets.all(0),
                  itemCount: meditationMusicList.length,
                  separatorBuilder: (context, index) => SizedBox(height: 10),
                  itemBuilder: (context, index) {
                    return SettingButton(
                      buttonTitle: meditationMusicList[index],
                      iconPath: Images.playIcon,
                      onTap: () {
                        print('${meditationMusicList[index]} oynatılıyor...');
                      },
                      hasArrow: false,
                    );
                  },
                ),
              ),
            ),
          ],
        ));
  }
}

我尝试使用ClipRect，我尝试将SingleChildScrollView放在Column而不是ListView中，我尝试shrinkWrap，无论我做什么，我都无法消除问题。

Answer 1

我找到了解决方案。我正在为那些对此问题有其他问题的人分享解决方案。

解决方案： 通过使用 Material 小部件包装 SettingsButton 小部件解决了该问题，该小部件将 InkWell 的墨水飞溅效果限制在其范围内。这可以防止 ListView 外部墨迹效果的视觉溢出。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

import '../../util/styles.dart';

class SettingButton extends StatelessWidget {
  final String buttonTitle;
  final String iconPath;
  final bool? isSwitchButton;
  final bool? hasSubText;
  final bool? hasArrow;
  final double? iconHeight;
  final void Function()? onTap;
  final void Function(bool)? switchAction;

  SettingButton(
      {required this.buttonTitle,
        required this.iconPath,
        required this.onTap,
        this.isSwitchButton,
        this.hasSubText,
        this.switchAction, this.hasArrow = true, this.iconHeight = 15});

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(10),
        child: Ink(
          height: 45,
          width: double.infinity,
          padding: const EdgeInsets.only(top: 10, bottom: 10),
          decoration: BoxDecoration(
            color: Theme.of(context).primaryColor,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Row(
            children: [
              SizedBox(width: 16),
              Container(
                height: 30,
                width: 30,
                decoration: BoxDecoration(
                  color: Color(0xFFD9D9D9),
                  shape: BoxShape.circle,
                ),
                child: Center(
                  child: SvgPicture.asset(
                    iconPath,
                    color: Color(0xFF1E1E1E),
                    height: iconHeight,
                  ),
                ),
              ),
              SizedBox(width: 16),
              Text(
                buttonTitle,
                style: poppinsRegular.copyWith(fontSize: 14, color: Colors.white),
              ),
              Spacer(),
              if (isSwitchButton != true)
                if (hasSubText == true)
                  Text(
                    'Türkçe',
                    style:
                    poppinsMedium.copyWith(fontSize: 14, color: Colors.white),
                  ),
              if (hasSubText == true) SizedBox(width: 5),
              if (isSwitchButton == true)
                SizedBox(
                  width: 50,
                  height: 20,
                  child: Switch(
                    value: false,
                    onChanged: switchAction,
                    inactiveThumbColor: Colors.white,
                    inactiveTrackColor: Colors.grey.shade200,
                    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  ),
                )
              else if (hasArrow == true)
                Icon(
                  Icons.arrow_forward_ios,
                  color: Colors.white,
                  size: 20,
                ),
              SizedBox(width: 16),
            ],
          ),
        ),
      ),
    );
  }
}