Question

我正在使用 ColorFiltered 小部件使由于某种原因而被禁用的小部件变灰。

ColorFiltered 小部件与图像配合使用，但不会更改文本小部件的颜色。

这是一次使图像和文本小部件变灰的方法吗？

以下是我的“ DisableWidget ”

server = http.createServer(app);
server.listen(PORT, (err) => {
  if (err) {
    return console.error('Failed', err);
  }
  console.log(`Listening on port ${PORT}`);
  const io = socketio(server);
  io.adapter(redisAdapter({ host: process.env.REDIS_IP, port: process.env.REDIS_PORT }));
  // Work with sockets
  io.on('connection', (socket) => {
    console.log('---------------');
    console.log('New client connected');
    // Client connection
    socket.on('joinRoom', (msg) => {
      const { user, room } = msg;
      console.log('-----------');
      console.log(`${user.username} se ha conectado a la sala ${room.name}`);
      // Join room
      socket.join(room.name);
    });

    // Recieve message
    socket.on('chatMessage', async (msg) => {
      console.log('-----------');
      console.log(`message recieve, broadcasting to ${msg.room.name}`);
      // broadcast message to same room
      socket.broadcast
        .to(msg.room.name)
        .emit(
          'message',
          { user: msg.user, message: msg.message },
        );
    });

    // Client disconnect
    socket.on('disconnect', () => {
      console.log('-------------');
      console.log('Client disconnected');
    });
  });

  return app;
});

Answer 1

我设法通过将 ColorFiltered 和 Opacity 小部件包装在一起来做到这一点。

这是我最后的 DisableWidget 。

class DisableWidget extends StatelessWidget {
  final Widget child;
  final bool disable;
  const DisableWidget({
    Key key,
    this.child,
    this.disable = false,
  }) : super(key: key);

  Widget build(BuildContext context) {
    return disable
        ? Opacity(
            opacity: 0.5,
            child: ColorFiltered(
              colorFilter: ColorFilter.mode(Colors.grey, BlendMode.saturation),
              child: AbsorbPointer(
                absorbing: true,
                ignoringSemantics: true,
                child: child,
              ),
            ),
          )
        : child;
  }
}

带有文本小部件的Flutter ColorFiltered小部件

1 个答案: