flutter - 如何使用自定义类进行装饰？

Question

我想为我的 Flutter 应用中的每个页面使用背景图片。因此，我希望有一个类可以用来返回一个 BoxDecoration 以从我创建的每个新页面调用它。目前，我正在使用一个简单的全局函数 backgroundImage()，它返回一个 BoxDecoration。有没有办法让我可以直接传递给 decoration: 而不是调用全局函数的自定义类？

BoxDecoration backgroundImage() {
  return BoxDecoration(
    image: DecorationImage(
      image: AssetImage("images/background.png"),
      fit: BoxFit.cover,
    ),
  );
}

class HomeScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: backgroundImage(),
        child: null /* add child content here */,
      ),
    );
  }
}

Answer 1

在我看来，您想要的是一个可以导入和重复使用的变量。创建一个新类，您将只在其中返回一个带有一些自定义选项的 BoxDecoration 实例，这可能有点矫枉过正。为什么不创建一个单独的文件，导入 Material ，用您的自定义声明一个变量并使用它？像这个例子:

要重用的自定义装饰文件:

import 'package:flutter/material.dart';

BoxDecoration baseBackgroundDecoration =
  BoxDecoration(
    image: DecorationImage(
      image: AssetImage("images/background.png"),
      fit: BoxFit.cover,
    ),
  );

使用它:

import 'custom_decorations.dart';

使用变量:

Container(
  decoration: baseBackgroundDecoration,
),

---

虽然您最初的想法没有错。您不会将其用作全局变量，只是在需要时导入的文件，其中包含一个带有自定义装饰的类，如下所示:

import 'package:flutter/material.dart';

class CustomDecorations {
  BoxDecoration baseBackgroundDecoration(){
    return BoxDecoration(
      image: DecorationImage(
        image: AssetImage("images/background.png"),
        fit: BoxFit.cover,
      ),
    );
  }
}

然后您可以通过以下方式之一使用它:

Container(
  decoration: CustomDecorations().baseBackgroundDecoration(),
),

或者:

// Declare it
CustomDecorations customDecorations = CustomDecorations();

...

// Use it
Container(
  decoration: customDecorations.baseBackgroundDecoration(),
),