Flutter：我可以在 Dismissible 中使用 Ink 吗？

问题描述

我正在使用带有装饰的 Ink 小部件，以允许墨水溅到图像和彩色背景上。

将它包裹在 dismissible 中后，我得到了一个奇怪的效果：当我滑动小部件时，它的内容按预期移动，但装饰卡在原来的位置。

您可以在 dartpad 中实时查看：https://dartpad.dev/5ef2d2eb3823821a74aa11c680d84d4b?null_safety=true

问：这是 Flutter 中的预期行为还是错误？

注意：如果我将 Ink 替换为 Container 或将其从 SingleChildScrollView 中移除，问题就会消失。

要重现的代码：


import 'package:Flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // remove SingleChildScrollView and all will be fine
        body: SingleChildScrollView(
          child: dismissible(
            key: Key('1'),// change Ink to Container and all will be fine
            child: Ink(
              width: 100,height: 100,color: Colors.red,child: Text('Swipe me,and watch my background get stuck!'),),);
  }
}

解决方法

Ink 的文档是...

在 [材质] 上绘制装饰（可以是简单的颜色）。

它发生在您的示例代码中，因为它为 MaterialApp 着色。要解决您的问题，请将 Ink 包裹在 Material 中。

示例...

Material(
  child: Ink(
    width: 100,height: 100,color: Colors.red,child: Text('Swipe me,and watch my background get stuck!'),),

dismissible rust-ink