如何将整页渐变置于图像之上？

我希望达到的目标：

我试过的：

我尝试了一个带有两个堆叠 BackdropFilter 的容器，但这似乎不起作用。

class HomePage extends StatelessWidget {
  // Color gradientStart = Colors.transparent;
  // Color gradientEnd = Colors.black;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [gradientStart, gradientEnd],
            begin: FractionalOffset(0, 0),
            end: FractionalOffset(0, 1),
            stops: [0.0, 1.0],
            tileMode: TileMode.clamp
          ),
          // child: BackdropFilter()
          // image: DecorationImage(
          //   image: ExactAssetImage('assets/images/screen-1.jpg'),
          //   fit: BoxFit.cover,
          // ),
        ),
        child: Column(
            children: [
              Expanded(
                child: Container(
                  child: Align(
                    alignment: FractionalOffset(0.5, 0.0),
                    child: Container(
                      margin: EdgeInsets.only(top: …

在真正的 iPhone（不是模拟器）上运行 iOS 应用程序时，您可能会遇到这个问题。
原因是该应用程序未由受信任的来源签名。

完整错误：

[plugin:vite:vue] Transform failed with 1 error:
/home/projects/vue3-vite-typescript-starter-jkcbyx/src/App.vue:33:73: 
ERROR: Invalid assignment target

"/home/projects/vue3-vite-typescript-starter-jkcbyx/src/App.vue:33:73"

Invalid assignment target
31 |        ? (_openBlock(), _createElementBlock("div", _hoisted_2, [
32 |            _withDirectives(_createElementVNode("textarea", {
33 |              "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($setup.np?.description) = $event))
   |                                                                           ^
34 |            }, null, 512 /* NEED_PATCH */), [
35 |              [

这里是App.vue：

<script setup lang="ts">
import { ref } from 'vue'

interface Thing {
  description: string
}

const np = ref<Thing>({
  description: 'asdf asdf asdf',
}) …