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 上发布了 Issue。

解决方案a

Card

与

clipBehavior: Clip.antiAlias

。

Answer 2

只需将

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];
        },
      ),
    );
  }
}

截图

在 DartPad 上尝试完整代码

Answer 3

您可以通过在

shape

中添加

ListTile

属性来实现圆角。

ListTile(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(25),
                  topRight: Radius.circular(25),
                   ),
                 ),
          tileColor: Colors.indigo,
          textColor: Colors.white,
          iconColor: Colors.white,
          leading: Icon(Icons.light),
          title: Text('List Tile 2'),
          subtitle: Text('This is a subtitle'),
        ),