Listtile 的列在开头和结尾处带有圆角

Question

我正在尝试创建一列列表图块，其中顶角和底角是圆角的。有些图块在悬停时会改变颜色，而另一些则不会。因此，我尝试了两件事：

• 创建一个带有圆角的容器，在里面添加一个带有我的 listTiles 的列。
• 使用我的列表图块创建一个列，并为第一个和最后一个元素添加特定的圆角计数器。
• 为容纳所有元素的容器着色。那么问题是列表图块的悬停颜色绘制在容器的悬停颜色之下。

遗憾的是，在这两种情况下，列表图块的背景颜色都会从圆形容器中溢出，如下图所示：

这是第二次尝试的示例代码：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final children = List<Widget>.generate(
      5,
      (i) => ListTile(
          tileColor: Colors.green, hoverColor: Colors.red, title: Text('$i')));

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: List.generate(
        children.length,
        (index) {
          if (index == 0 && index == children.length - 1) {
            return Ink(
              // clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.red,
                ),
                borderRadius: BorderRadius.circular(20),
                color: Colors.blue,
              ),
              child: children[index],
            );
          }
          if (index == 0) {
            return Container(
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.red,
                ),
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(20),
                    topRight: Radius.circular(20)),
                color: Colors.blue,
              ),
              child: children[index],
            );
          } else if (index == children.length - 1) {
            return Container(
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.red,
                ),
                borderRadius: const BorderRadius.only(
                    bottomLeft: Radius.circular(20),
                    bottomRight: Radius.circular(20)),
                color: Colors.blue,
              ),
              child: children[index],
            );
          }

          return children[index];
        },
      ),
    );
  }
}

其中children是 listile 和其他元素的列表。

如何强制元素children遵守父容器设置的边界限制？

Answer 1

我最终在 Github 上发布了一个问题。

解决方案 aCard与clipBehavior: Clip.antiAlias.