Flutter - 更改小部件的背景颜色答案

【问题标题】：Flutter - Change background color of a widgetFlutter - 更改小部件的背景颜色
【发布时间】：2019-08-27 05:55:19
【问题描述】：

Widget _buildImageColumn() => Container(
     decoration: BoxDecoration(
    color: Colors.black26,
  ),
  child: Column(
    children: [
      _buildImageRow(1),
      _buildImageRow(3),
    ],
  ),
);

Widget _buildDecoratedImage(int imageIndex) => Expanded(
  child: Container(
    decoration: BoxDecoration(
      border: Border.all(width: 10, color: Colors.black38),
      borderRadius: const BorderRadius.all(const Radius.circular(8)),
    ),
    margin: const EdgeInsets.all(4),
    child: Image.asset('images/pic$imageIndex.jpg'),
  ),
);

Widget _buildImageRow(int imageIndex) => Row(
  children: [
    _buildDecoratedImage(imageIndex),
    _buildDecoratedImage(imageIndex + 1),
  ],
);

以上代码取自flutter网站。

我想用一些动画（图像）改变小部件的背景颜色。但是在第一个选项卡之后，我不想再次执行点击功能。

我尝试将_buildDecoratedImage 移动到有状态的小部件，我可以为特定小部件设置动画并仅禁用对该小部件的点击。我无法禁用对其他三个图像（小部件）的点击。

虽然我可以在不将_buildDecoratedImage 移动到有状态小部件并禁用所有小部件的点击的情况下为背景设置动画。但是整个屏幕都被重建了。

有什么方法可以在不使用流的情况下实现这一点？必须点击其中一张图像并为背景设置动画，之后不应点击每张图像。

请为此提出最佳解决方案。

【问题讨论】：

只需使用一个布尔值，当用户第一次点击时，您可以设置为 true，如果它为 false，您的函数将不会再次执行
是的。但是当我使用 setstate 更改轻按小部件的背景颜色时，整个屏幕都会重建
是的，整个树都被重建了。如果您不希望这种情况发生，请使用 BLOC 架构。
@KeertiPurswani 是的。我试过BLoC。 BLoC 正在工作。有没有不使用 BLoC 的解决方案？
如果你用的是常规的状态管理，我觉得是不可能的。你可以使用streamController，但这是基本的 Bloc 本身。

标签： flutter flutter-layout flutter-animation

【解决方案1】：

如果您不想使用 bloc 插件，您可能需要考虑使用 Stream 来监听值集的变化。

final _imageIndex = StreamController<int>.broadcast();
Stream<int> get imageIndex => _imageIndex.stream;

// Update image index
updateImageIndex(int index) {
  _imageIndex.sink.add(index);
}

然后更新，您可以拨打updateImageIndex(index)。要侦听更改，您可以在 StreamBuilder 上设置 imageIndex - 当检测到 Stream 上的更改时会重新构建。

StreamBuilder<int>(
  stream: imageIndex,
  builder: (context, AsyncSnapshot<int> snapshot) {
    if (snapshot.hasData) {
      debugPrint('Image index: ${snapshot.data}');
    }
  }
)

【讨论】：