时间戳

首页 > 解决方案 > 容器内的墨水/图标按钮颜色

flutter - 容器内的墨水/图标按钮颜色

问题描述

我在容器内的 Ink 中有一个 IconButton（给它一个边框）。然而，边框是不可见的，因为它被容器颜色覆盖。

在容器内显示具有彩色背景的 IconButton 的最佳方式是什么？

工作示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return Container(
    color: Colors.pink,
    child: Center(
      child: Ink(
        decoration: const ShapeDecoration(
          color: Colors.black,
          shape: CircleBorder(),
        ),
        child: IconButton(
          icon: Icon(Icons.android),
          color: Colors.white,
          onPressed: () {},
        ),
      ),
    ),
  );
}

}

标签： flutter

解决方案

使用Material代替Container （见官方示例）

原因Container不起作用是因为 Ink 是在底层Material小部件上绘制的，如Ink doc中所述：

由 InkWell 和 InkResponse 渲染的墨迹飞溅和高光在实际的底层材质上绘制，在材质上绘制的任何小部件（例如文本和图标）下。如果在材质上绘制不透明图像（可能使用 Container 或 DecoratedBox），则这些墨水效果将不可见，因为它们将被绘制在材质上方的不透明图形完全遮挡。

查看工作演示：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return Material(
    color: Colors.red,
    child: Center(
      child: Ink(
        decoration: const ShapeDecoration(
          color: Colors.black,
          shape: CircleBorder(),
        ),
        child: IconButton(
          icon: Icon(Icons.android),
          color: Colors.white,
          onPressed: () {},
        ),
      ),
    ),
  );
}

}

额外的：

如果你真的需要一个 Container 或其他不是 Material 的小部件，你只需要在 Ink Widget 和父部件之间添加一个 Material 小部件。（透明背景）

像这样：


Container(
    color: Colors.red,
    child: Material(
    color: Colors.transparent,
    child: Center(
      child: Ink(
        decoration: const ShapeDecoration(
          color: Colors.black,
          shape: CircleBorder(),
        ),
        child: IconButton(
          icon: Icon(Icons.android),
          color: Colors.white,
          onPressed: () {},
        ),
      ),
    ),
  ))

推荐阅读