如何在Flutter的ProfileListItem组件内添加TextButton

我尝试在ProfileListItem内添加TextButton但未能成功，以下是我的代码：

Expanded(
  child: ListView(
    children: const <Widget>[
      ProfileListItem(
        icon: LineAwesomeIcons.lock,
        text: 'Privacy',
        hasNavigation: true,
      ),
    ],
  ),
);

class ProfileListItem extends StatelessWidget {
  final IconData icon;
  final text;
  final bool hasNavigation;

  const ProfileListItem({
    Key? key,
    required this.icon,
    this.text,
    required this.hasNavigation,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        height: kSpacingUnit.w * 5.5,
        margin: EdgeInsets.symmetric(horizontal: kSpacingUnit.w * 4)
            .copyWith(bottom: kSpacingUnit.w * 2),
        padding: EdgeInsets.symmetric(horizontal: kSpacingUnit.w * 2),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(kSpacingUnit.w * 3),
          //color: Theme.of(context).backgroundColor,
          color: AppColors.deep_orange,
        ),
        child: Row(children: <Widget>[
          Icon(
            this.icon,
            size: kSpacingUnit.w * 2.5,
          ),
          SizedBox(width: kSpacingUnit.w * 2.5),
        
          Text(
            this.text,
            style: kTitleTextStyle.copyWith(fontWeight: FontWeight.w500),
          ),
          Row(
            children: <Widget>[
              Icon(
                this.icon,
                size: kSpacingUnit.w * 2.5,
              ),
              SizedBox(width: kSpacingUnit.w * 2.5),
              Text(
                this.text,
                style: kTitleTextStyle.copyWith(fontWeight: FontWeight.w500),
              ),
             
            ],
          ),
        ]));
  }
}

修改方案 #

要在ProfileListItem中添加可点击的TextButton，只需调整组件结构并添加点击回调参数即可：

Expanded(
  child: ListView(
    children: <Widget>[
      ProfileListItem(
        icon: LineAwesomeIcons.lock,
        text: 'Privacy',
        hasNavigation: true,
        onPressed: () {
          // 这里写入点击后的逻辑，比如跳转隐私设置页面
          print('Privacy选项被点击');
        },
      ),
    ],
  ),
);

class ProfileListItem extends StatelessWidget {
  final IconData icon;
  final String text; // 明确指定类型，提升代码严谨性
  final bool hasNavigation;
  final VoidCallback? onPressed; // 添加点击回调参数

  const ProfileListItem({
    Key? key,
    required this.icon,
    required this.text, // 设置为必填参数，确保每个列表项都有文本
    required this.hasNavigation,
    this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: kSpacingUnit.w * 5.5,
      margin: EdgeInsets.symmetric(horizontal: kSpacingUnit.w * 4)
          .copyWith(bottom: kSpacingUnit.w * 2),
      padding: EdgeInsets.symmetric(horizontal: kSpacingUnit.w * 2),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(kSpacingUnit.w * 3),
        color: AppColors.deep_orange,
      ),
      child: Row(
        children: <Widget>[
          Icon(
            icon,
            size: kSpacingUnit.w * 2.5,
          ),
          SizedBox(width: kSpacingUnit.w * 2.5),
          // 将原Text替换为TextButton
          TextButton(
            onPressed: onPressed,
            child: Text(
              text,
              style: kTitleTextStyle.copyWith(fontWeight: FontWeight.w500),
            ),
            style: TextButton.styleFrom(
              padding: EdgeInsets.zero,
              minimumSize: Size.zero,
              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ), // 移除默认内边距，保持原有布局
          ),
          // 保留导航图标逻辑，用Spacer推至右侧
          if (hasNavigation) const Spacer(),
          if (hasNavigation)
            Icon(
              LineAwesomeIcons.angle_right,
              size: kSpacingUnit.w * 2.5,
            ),
        ],
      ),
    );
  }
}

核心调整说明 #

1. 新增onPressed参数，用于接收点击事件的处理逻辑
2. 将原静态Text替换为TextButton，绑定点击回调
3. 通过TextButton.styleFrom移除默认内边距，避免布局错位
4. 优化类型定义，明确text为必填String类型，提升代码稳定性

内容的提问来源于stack exchange，提问作者Md. Atikul Islam Sumon