Flutter Slidable组件文本超出容器边框问题求解

使用flutter_slidable包实现可滑动文本功能时，滑动操作时文本会超出容器边框，该如何调整使文本不超出边框？

代码示例：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(),
            ),
            height: 200,
            width: 200,
            child: Slidable(
              // 左侧/顶部的操作面板
              startActionPane: ActionPane(
                // 控制面板动画的motion组件
                motion: const ScrollMotion(),
                children: [
                  SlidableAction(
                    onPressed: (context) {},
                    backgroundColor: Color(0xFF21B7CA),
                    foregroundColor: Colors.white,
                    icon: Icons.share,
                    label: '分享',
                  ),
                ],
              ),

              // 右侧/底部的操作面板
              endActionPane: ActionPane(
                motion: const ScrollMotion(),
                children: [
                  SlidableAction(
                    onPressed: (context) {},
                    backgroundColor: Color(0xFF0392CF),
                    foregroundColor: Colors.white,
                    icon: Icons.save,
                    label: '保存',
                  ),
                ],
              ),

              // 未拖动时显示的内容
              child: const ListTile(title: Text('滑动我')),
            ),
          ),
        ),
      ),
    );
  }
}

问题截图：

这个问题是因为Slidable默认允许内容超出父容器滑动，通过以下方法可以解决：

• 给Slidable添加clipBehavior属性：在Slidable组件中设置clipBehavior: Clip.hardEdge，滑动时内容会被父容器边框裁剪，不会超出范围。这是最直接的方法。
• 给外层Container设置clipBehavior：如果不想修改Slidable，也可以给包裹它的Container添加clipBehavior: Clip.hardEdge，同样能实现裁剪效果。
• 用ConstrainedBox限制Slidable尺寸：在Slidable外层包裹ConstrainedBox，强制其尺寸不超过父容器，从根源上避免溢出。

修改后的示例代码（使用第一种方法）：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(),
            ),
            height: 200,
            width: 200,
            child: Slidable(
              // 开启裁剪，限制内容不超出父容器
              clipBehavior: Clip.hardEdge,
              startActionPane: ActionPane(
                motion: const ScrollMotion(),
                children: [
                  SlidableAction(
                    onPressed: (context) {},
                    backgroundColor: Color(0xFF21B7CA),
                    foregroundColor: Colors.white,
                    icon: Icons.share,
                    label: '分享',
                  ),
                ],
              ),
              endActionPane: ActionPane(
                motion: const ScrollMotion(),
                children: [
                  SlidableAction(
                    onPressed: (context) {},
                    backgroundColor: Color(0xFF0392CF),
                    foregroundColor: Colors.white,
                    icon: Icons.save,
                    label: '保存',
                  ),
                ],
              ),
              child: const ListTile(title: Text('滑动我')),
            ),
          ),
        ),
      ),
    );
  }
}

注：clipBehavior可选值有Clip.hardEdge、Clip.antiAlias、Clip.antiAliasWithSaveLayer，其中Clip.hardEdge性能最优，适合大多数场景。

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