将颜色应用到 Container 的特定高度 |扑

Question

我有一个高度为 600 的容器。现在我想给它应用背景色，但只能应用到高度 200。这在 Flutter 中可行吗？我的限制是我不能使用多个容器或任何其他小部件来实现此目的。 我只能对此现有小部件进行更改。

Container (
  height: 600,
  color: Colors.blue //Only apply until height 200
)

Answer 1

您可以为此使用 LinearGradient。你可以玩这个片段，尤其是 stops.

Container(
  height: 600,
  width: 100,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black),
    gradient: const LinearGradient(
      colors: [
        Colors.transparent,
        Colors.red,
      ],
      stops: [4 / 6, 4 / 6],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    ),
  ),
)

Answer 2

我认为 LinearGradient 是唯一的选择，但你应该应用一些小技巧来摆脱平滑过渡，下面的代码片段适合你

  Container(
    height: 600,
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        stops: [200 / 600, 200 / 600, 1],
        colors: [Colors.blue, Colors.transparent, Colors.transparent],
      ),
    ),
  )

将颜色应用到 Container 的特定高度 |扑

Apply color until certain height to a Container | Flutter

flutter

flutter-layout