如何实现自定义List Tile/卡片样式？附现有实现代码

问题背景 #

我尝试实现自定义List Tile列表项，但始终无法达到预期效果。已将其封装为自定义Widget简化页面代码，其中文字和Logo被遮挡的样式为需求样式（隐私保护）。

当前实现代码 #

自定义Widget：CustomListTile #

class CustomListTile extends StatelessWidget {
String title;
String subtitle1;
String subtitle2;
String imagePath;

CustomListTile({
 required this.title,
 required this.subtitle1,
 required this.subtitle2,
 required this.imagePath,
});

@override
Widget build(BuildContext context) {
 double screenWidth = MediaQuery.of(context).size.width;
 double screenHeight = MediaQuery.of(context).size.height;
 return SizedBox(
   width: screenWidth * 0.9,
   height: screenHeight * 0.2,
   child: Column(
     children: [
       Container(
         height: screenHeight * 0.1,
          decoration: const BoxDecoration(
           borderRadius: BorderRadius.only(
               topRight: Radius.circular(10), topLeft: Radius.circular(10)),
           color: Colors.white,
         ),
         child: Center(child: Text(title)),
       ),
        Container(
          height: screenHeight * 0.10,
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.only(
               bottomRight: Radius.circular(10),
               bottomLeft: Radius.circular(10)),
            color: Colors.blue,
         ),
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 10.0),
           child: Row(
             crossAxisAlignment: CrossAxisAlignment.center,
             mainAxisAlignment: MainAxisAlignment.end,
             children: [
               Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
                   Text(subtitle1),
                   Text(subtitle2),
                 ],
               ),
               SizedBox(
                 width: screenWidth * 0.05,
               ),
               ClipOval(
                 child: Container(
                   child: Center(
                      child: Image.asset(imagePath)),
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Colors.white),
                ),
              )
            ],
          ),
        ),
      )
    ],
  ),
  );
 }
}

HomeScreen代码片段 #

SafeArea(
  child: Scaffold(
    body: Stack(
      children: [
        Container(
          width: double.infinity,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/back5.jpg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Align(
            alignment: Alignment.topCenter,
            child: Card(
              elevation: 4,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Container(
                width: screenWidth * 0.90, // Adjust the width as needed
                height: screenHeight * 0.100, // Adjust the height as needed
                child: ListTile(
                  trailing: ClipOval(
                    child: Image.asset(
                      "assets/images/logo3.png",
                      width: 40,
                      height: 40,
                    ),
                  ),
                  title: Text(
                    "testapp",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: MyColors.myBlue,
                      fontFamily: "Arabic",
                      fontSize: screenWidth * 0.04,
                    ),
                  ),
                  subtitle: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Container(
                        color: MyColors.myBlue,
                        child: Text(
                          "user",
                          textAlign: TextAlign.right,
                          style: TextStyle(
                            color: Colors.white,
                            fontFamily: "Arabic",
                            fontSize: screenWidth * 0.04,
                          ),
                        ),
                      ),
                      Text(
                        "number",
                        textAlign: TextAlign.right,
                        style: TextStyle(
                          color: Colors.white,
                          fontFamily: "Arabic",
                          fontSize: screenWidth * 0.04,
                        ),
                      ),
                    ],
                  ),
                  onTap: () {
                    // Handle the tap action here
                  },
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

优化调整方案 #

1. 布局适配优化 #

• 替换固定比例高度设置，用IntrinsicHeight或Wrap让内容自适应，避免不同设备上布局错位；移除不必要的SizedBox固定宽高，改用Padding和Expanded控制间距。
• 简化图片布局：ClipOval直接包裹Image.asset即可，无需额外嵌套Container，示例：

  ClipOval(
    child: Image.asset(
      imagePath,
      width: 50,
      height: 50,
      fit: BoxFit.cover,
    ),
  )
  

2. 代码规范与可维护性 #

• 给成员变量添加final修饰符，符合StatelessWidget不可变特性：

  final String title;
  final String subtitle1;
  final String subtitle2;
  final String imagePath;
  

• 提取统一的TextStyle变量，保证自定义Tile与HomeScreen样式一致，减少重复代码。

3. 交互与视觉统一 #

• 给自定义CustomListTile添加onTap回调参数，保持和系统ListTile一致的交互体验。
• 添加elevation和圆角阴影，匹配HomeScreen中Card的视觉效果，提升层级感。

4. 简化层级结构 #

将自定义Tile的Column+Container结构替换为ListTile组件的组合，或用Row+Column嵌套优化布局，减少容器嵌套层级，提升渲染性能。

内容的提问来源于stack exchange，提问作者MãĴď