Listtile 的列在开始和结束处带有圆角

Question

我正在尝试制作一列顶部和底部角为圆角的列表图块。一些瓷砖在悬停时会改变颜色，而另一些则不会。因此，我尝试了两件事：

创建一个带有圆角的容器，用我的 listTiles 在里面添加一个 Column。
用我的列表块创建一个列，并为第一个和最后一个元素添加特定的圆形计数器。
为容纳所有元素的容器着色。那么问题是 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

只需将 clipBehavior: Clip.antiAlias 添加到您的 Container。

代码示例

class MyWidget extends StatelessWidget {
  final children = List<Widget>.generate(5, (i) => ListTile(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 Container(
              clipBehavior: Clip.antiAlias, // here
              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, // here
              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, // and here
              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];
        },
      ),
    );
  }
}

截图

Try the full code on DartPad

Answer 2

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

Card 与 clipBehavior: Clip.antiAlias 的解决方案。

Listtile 的列在开始和结束处带有圆角

Column of Listtile with rounded corner at beginning and end

border

flutter

listtile

代码示例

截图