在 Flutter 中，AppBar 是一个重要的组件，通常用于显示应用程序的标题、导航按钮、操作菜单等。随着用户界面设计的发展，滚动效果在移动应用中变得越来越常见。scrolledUnderElevation 属性正是为了解决当页面滚动时，AppBar 的阴影效果的控制需求。

比如你使用了某个滚动组件,然后发现了为什么滚动的时候我的 AppBar 变色了呢?
这就是原因: scrolledUnderElevation 属性。

什么是 scrolledUnderElevation?

scrolledUnderElevation 是 Flutter 3.0 引入的 AppBar 属性之一。它用于设置当 AppBar 位于滚动内容顶部且内容向下滚动时的 阴影高度。简单来说，当页面向下滚动且 AppBar 覆盖部分内容时，该属性决定了 AppBar 的阴影深度。

使用场景

在用户滚动列表或长内容时，我们通常希望 AppBar 在不同的滚动状态下显示不同的视觉效果。例如：

• 初始状态（未滚动）： AppBar 通常是透明的或没有阴影。
• 滚动状态： 当用户滚动页面并向下查看内容时，AppBar 应该带有一定的阴影，以显示它在内容之上的层次感。

这种设计可以改善用户体验，使界面更清晰且具有层次感。

Why is this error occurring?

The ERR_OSSL_EVP_UNSUPPORTED error in a React JS application typically arises due to an underlying issue with the version of Node.js and OpenSSL being used. This error is commonly encountered when certain cryptographic algorithms or keys are not supported by the OpenSSL version bundled with the Node.js installation.

How can I fix this error?

Node.js 17 has a new option called –openssl-legacy-provider. This option lets you go back to using the old way of doing things until you can update your code to work with the new rules.

package.json file

1
2
3
4
5

{
  "scripts": {
    "start": "node --openssl-legacy-provider index.js"
  }
}

set environment variable

1

export NODE_OPTIONS=--openssl-legacy-provider

change it in the gradle file

1
2
3

project.ext.react = [
    nodeExecutableAndArgs: ["node", "--openssl-legacy-provider"]
]

change it in the Xcode build settings

1
2
3

buildSettings = {
  NODE_OPTIONS = "--openssl-legacy-provider";
}

After changes, try running the application again. Or you also need to reinstall the dependencies.

validity 对象

通过 validity 对象，通过下面的 valid 可以查看验证是否通过，如果八种验证都通过返回 true，有一种失败则返回 false

• oText.addEventListener(‘invalid’, fn, false);
• ev.preventDefault()
• valueMissing: 输入值为空时
• typeMismatch: 控件值与预期类型不匹配
• patterMismatch: 输入值不满足 pattern 正则
• tooLong: 超过 maxLength 最大限制
• rangeUnderflow: 验证的 range 最小值
• rangeOverflow: 验证的 range 最大值
• setMismatch: 验证 range 的当前值是否符合 min、max、step 的规则
• customError: 不符合自定义验证–setCustomValidity()设置自定义验证

set-cookie

1

Set-cookie: value[; expires=date][; domain=domain][; path=path][; secure]

每个选项都是用分号和空格来分开，每个选项都制定了 cookie 在什么情况下会发送给服务器

过期时间选项

• expires: 指定了 cookie 最长存储时间，过期后会被浏览器删除。值是一个 date ，格式为 WDY, DD-mm-YYYY HH:MM:SS GMT。
• 没有设置 expires 选项时，默认为当前会话，所设置的 cookie 在关闭浏览器时会被删除。

1

Set-cookie: name=Jack; expires=Tue, 28 May 2019 22:33:22 GMT

domain 选项

• domain: 指定了 cookie 将要被发给哪个域中。
• 默认情况下会被设置为当前域。
• 值必须是消息头主机的一部分，不合法的 domain 会直接被忽略。

1

Set-cookie: name=Jack; domain=baidu.com

path 选项

• path: 指定了请求资源的 URL 中存在指定路径时，才会发送 cookie。
• 只有对 domain 匹配成功后才会开始匹配 path 部分。

1

Set-cookie: name=Jack; domain=baidu.com; path=/

secure 选项

• secure: 只是一个标记，当请求通过 SSL 或者 HTTPS 创建时，包含 secure 的 cookie 才会被发送至服务器。
• 默认情况下， HTTPS 上传输的 cookie 都会被自动加上 secure 选项。

1

Set-cookie: name=Jack; secure

HTTPOnly 选项

• HttpOnly: 禁止浏览器通过 JavaScript 来获取 cookie ，防止 XSS 攻击。
• 这个属性也不能通过 JavaScript 来设置。

1

Set-cookie: name=Jack; HttpOnly

cookie 自动删除

1. 会话结束。
2. 超过过期时间。
3. cookie 数量达到限制，删除部分 cookie 以便为新创建的 cookie 腾出空间。

JavaScript 读取 cookie

可以使用document.cookie来读取 cookie 的值。