小编Rob*_*ens的帖子

颤振 - 如何将图像与渐变色混合?

我试图复制我的设计师为应用程序所做的登录屏幕设计.

背景图像使用了softLight的blendMode,其结果是它与之混合的颜色是渐变颜色.其次,实际上有两层不同的渐变(一个紫色渐变,一个蓝色渐变)

原始图片:

原始图像

最终的渐变图像

最终的渐变图像

现在我尝试使用colorBlendMode,例如

Image.asset(
      'assets/pioneer-party.jpg',
      fit: BoxFit.cover,
      color: Color(0xff0d69ff).withOpacity(1.0),
      colorBlendMode: BlendMode.softLight,
    ),
Run Code Online (Sandbox Code Playgroud)

问题是颜色属性只需要一种颜色.

然后我尝试了BoxDecoration,例如

DecoratedBox(
      decoration: new BoxDecoration(
        color: const Color(0xff7c94b6),
        image: new DecorationImage(
          fit: BoxFit.cover,
          colorFilter: new ColorFilter.mode(Colors.purple.withOpacity(1.0), BlendMode.softLight),
          image: new NetworkImage(
            'http://www.allwhitebackground.com/images/2/2582-190x190.jpg',
          ),
        ),
      ),
    ),
Run Code Online (Sandbox Code Playgroud)

这仍然让我遇到同样的问题.然后,我尝试单独堆叠每个图层,然后使用渐变来使其看起来接近设计,例如

Image.asset(
      'assets/pioneer-party.jpg',
      fit: BoxFit.cover,
      color: Color(0xff0d69ff).withOpacity(1.0),
      colorBlendMode: BlendMode.softLight,
    ),
    DecoratedBox(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: FractionalOffset.topCenter,
          end: FractionalOffset.bottomCenter,
          colors: [
            Color(0xff0d69ff).withOpacity(0.0),
            Color(0xff0069ff).withOpacity(0.8),
          ],
        ),
      ),
    ),
    DecoratedBox(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: FractionalOffset.topLeft,
          end: FractionalOffset.bottomRight,
          colors: [
            Color(0xff692eff).withOpacity(0.8),
            Color(0xff642cf4).withOpacity(0.8), …
Run Code Online (Sandbox Code Playgroud)

gradient dart flutter blend-mode

13
推荐指数
3
解决办法
9410
查看次数

React-Query - 使用react-testing-library进行单元测试

我有一个Dashboard包含子组件的组件,例如Child它使用反应查询。

我有一个针对该Dashboard组件的现有单元测试,该测试开始失败,错误是:

TypeError: queryClient.defaultQueryObserverOptions is not a function

  38 |     const { locale } = React.useContext(LocaleStateContext);
  39 |     const options = getOptions(locale);
> 40 |     return useQuery(
     |            ^
  41 |         rqKey,
  42 |         async () => {
  43 |             const result = await window.fetch(url, options);
Run Code Online (Sandbox Code Playgroud)

测试片段:

const queryClient = new QueryClient();
const { getByTestId, getByRole } = render(
    <IntlProvider locale="en" messages={messages}>
        <QueryClientProvider client={queryClient}>
            <Dashboard />
        </QueryClientProvider>
    </IntlProvider>,
);
Run Code Online (Sandbox Code Playgroud)

我阅读了有关测试的文档:

https://react-query.tanstack.com/guides/testing#our-first-test

但我不想一定要使用,renderHook因为我对结果不感兴趣。 …

typescript reactjs react-testing-library react-query

6
推荐指数
1
解决办法
2万
查看次数

使用远程配置在应用程序中设置 API Url - 好主意还是坏主意?

我一直在阅读很多关于安全性和其他方逆向工程您的应用程序,然后淹没您的 API 等方面的文章。

对于我当前的 (nativescript) 应用程序,我使用 Firebase 进行身份验证,然后将我自己的 API URL 硬编码到应用程序中。

我正在考虑使用Firebase 远程配置来检索我的 API URL,然后在应用程序中进行设置。为了不暴露我的 API URL。

我想知道以前是否有人这样做过?如果这种方法是好主意还是坏主意?

谢谢。罗伯特

firebase nativescript firebase-authentication firebase-remote-config

5
推荐指数
0
解决办法
563
查看次数