Flutter 自定义ExpansionTile类如何灵活传入不同数量的子组件

你只要给自定义的ExpandedTileCard类新增一个List<Widget>类型的参数，将其绑定到内部ExpansionTile的children属性上，就可以实现不同场景下自定义传入任意数量的子组件。

1. 修改后的完整组件代码 #

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class ExpandedTileCard extends StatelessWidget {
  final String toptitle;
  final String bottomnumber;
  // 新增子组件参数，默认赋值为空列表，不传也不会报错
  final List<Widget> children;

  const ExpandedTileCard({
    Key? key,
    required this.toptitle,
    required this.bottomnumber,
    this.children = const [],
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical:5.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            padding: const EdgeInsets.only(left: 0.0,bottom: 20.0),
            decoration: const BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  color: Colors.black
                )
              )
            ),
            child: Row(
              children: [
                Expanded(
                  flex:1,
                  child: SvgPicture.asset(
                    'assets/icons/phone-call.svg',
                    height: 30,
                  ),
                ),
                Expanded(
                  flex:9,
                  child: Container(
                    padding: const EdgeInsets.only(left: 15.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        ExpansionTile(
                          title: Text(
                            toptitle,
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.black,
                            ),
                            textAlign: TextAlign.left,
                          ),
                          // 绑定传入的子组件参数
                          children: children,
                        ),
                        Text(
                          bottomnumber
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

注：上面代码适配了Flutter空安全版本，如果你使用的是无空安全的老版本Flutter，去掉参数前的required、?，以及不必要的const修饰符即可

2. 调用示例 #

你可以根据场景任意传入不同的子组件：

ExpandedTileCard(
  toptitle: "recharge",
  bottomnumber: "*129939201#",
  // 自定义传入多个子组件
  children: [
    const ListTile(title: Text("充值10元")),
    const ListTile(title: Text("充值50元")),
    ElevatedButton(onPressed: (){}, child: const Text("确认充值"))
  ],
),

内容的提问来源于stack exchange，提问作者Mr Man