flutter 将ColorFiltered应用于容器

sf6xfgos 于 2022-12-05 发布在 Flutter

关注(0)|答案(2)|浏览(110)

我想将小部件ColorFiltered应用到另一个容器内的容器，问题是过滤器占用了所有屏幕=〉过滤器也应用到蓝色容器，并且该容器扩展。

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body:Test1()),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.blue,
        height: 300,
        width: MediaQuery.of(
          context,
        ).size.width,
        child: Align(
            child: ColorFiltered(
          colorFilter:
              const ColorFilter.mode(Colors.grey, BlendMode.saturation),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        )));
  }
}

flutter

来源：https://stackoverflow.com/questions/74643271/apply-colorfiltered-to-a-container

2条答案

按热度按时间

qoefvg9y1#

这似乎是一个Flutter问题，跟踪here。
该问题中建议的一种解决方法是将容器 Package 在ClipRect Widget中，如下所示：

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 300,
      width: MediaQuery.of(context).size.width,
      child: Align(
        child: ClipRect(
          child: ColorFiltered(
            colorFilter:
                const ColorFilter.mode(Colors.grey, BlendMode.saturation),
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2022-12-05

c90pui9n2#

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.indigo,
      height: 300,
      width: MediaQuery.of(context).size.width,
      child: Align(
        child: ClipRect(
          child: ColorFiltered(
            colorFilter:
                const ColorFilter.mode(Colors.grey, BlendMode.saturation),
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2022-12-05

我来回答

flutter 将ColorFiltered应用于容器

2条答案

相关问题

热门标签

最新问答