如何在ListView中剪辑InkWell

Question

我有一个带有圆角边缘的 ListView。如何使 InkWell 的飞溅与 ListView 的边框重合？

现在的飞溅是什么样子的：

我的代码：

      final borderRadius = BorderRadius.circular(20.0);
      return RefreshIndicator(
        onRefresh: _refreshList,
        child: Padding(
          padding: const EdgeInsets.only(top: 5, right: 16, left: 16),
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: AppColors.mainGreen,
              borderRadius: borderRadius,
            ),
            child: ClipRRect(
              borderRadius: borderRadius,
              child: ListView.builder(
                controller: _scrollController,
                reverse: true,
                physics: const AlwaysScrollableScrollPhysics(),
                itemCount: state.notes.length,
                itemBuilder: (BuildContext context, int index) {
                  final note = state.sortedNotes[index];
                  // TODO(MipZ): Сделать выделение по радиусу
                  return InkWell(
                    onTap: () => _onNoteTab(note.id),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Row(
                        children: [
                          SvgPicture.asset(
                            note.mood.selectedIcon,
                            height: 50,
                            width: 50,
                          ),
                          const SizedBox(width: 13),
                          //Расстояние между иконкой и информацией
                          Expanded(
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                _MoodRow(note: note),
                                _SleepAndFoodRow(note: note),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      );

我需要这个白色飞溅沿着 ListView 的边框

Answer 1

为墨水效果半径添加

borderRadius

属性

InkWell

return InkWell(
            borderRadius: borderRadius, // add border radius
            onTap: () => _onNoteTab(note.id),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  SvgPicture.asset(
                    note.mood.selectedIcon,
                    height: 50,
                    width: 50,
                  ),
                  const SizedBox(width: 13),
                  //Расстояние между иконкой и информацией
                  Expanded(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        _MoodRow(note: note),
                        _SleepAndFoodRow(note: note),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );