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

【问题标题】：Flutter: Can I use Ink in Dismissible?Flutter：我可以在 Dismissible 中使用 Ink 吗？
【发布时间】：2021-04-12 07:36:08
【问题描述】：

我正在使用带有装饰的 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!'),
            ),
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dismissible rust-ink

【解决方案1】：

Ink 的文档是……

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

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

样品...

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

【讨论】：