深海游弋的鱼 – 第 6 页

基于 Verdaccio 搭建鸿蒙（HarmonyOS Next）开发的轻量级 Node.js 私有仓库

一、背景

最近在进行 HarmonyOS Next 应用开发，官方的 DevEco Studio 4.1 需要时候 Node.js，但是公司开发环境不支持外网访问，需要搭建内网的镜像服务器。下面，我们研究在内网服务器只使用 Apache（HTTPD）/Nginx 提供文件下载服务，不安装 NodeJs 搭建代理服务的方法来建立 NPM 文件下载代理。

执行缓存任务的设备是 MacBook Pro 2023 / macOS Sonoma 14.3 。

二、简介

1. 什么是 Verdaccio

“一个基于 Node.js 的轻量级私有仓库”。
平时使用 npm publish 进行发布时，上传的仓库默认地址是 npm，通过 Verdaccio 工具在本地新建一个仓库地址，再把本地的默认上传仓库地址切换到本地仓库地址即可。当 npm install 时没有找到本地的仓库，则 Verdaccio 默认配置中会从 npm 中央仓库下载。

注：Verdaccio 表示意大利中世纪晚期 fresco 绘画中流行的一种绿色的意思。

2. 优点

私密性高，仅团队共享。
安全性高，能够有效的防治恶意代码攻击。
使用局域网，传输速度快。

3. 官网

三、准备环境

# 我们通过 nvm 管理 node 进行多版本切换 
$ brew install nvm

# 加载并且列出远程的 node 分支,否则执行 `nvm list` `nvm install` 等命令的
# 时候没办法列出或者安装对应的版本

$ nvm ls-remote

# 但是我们使用最新版本的 node 执行安装操作，这样才能干净的进行缓存
# 否则在我们后续安装 verdaccio 的时候，数据是已经缓存过的了
$ nvm install 20.11.0

# 没有特殊情况下，建议把刚刚安装的版本设置为默认版本
$ nvm alias default 20.11.0

# 安装 verdaccio
$ npm install --location=global verdaccio

# 全局安裝 npm 源管理工具（可以快速切换仓库源）

$ npm install --location=global nrm

# 添加一个私有 npm 源，'verdaccio' 为自定义的源地址名称 
$ nrm add verdaccio http://localhost:4873/

# 如果需要还原到默认设置，只需要删除当前用户下的 .nrmrc 文件即可

$ rm -rf .nrmrc

# 我们通过 nvm 管理 node 进行多版本切换

$ brew install nvm

# 加载并且列出远程的 node 分支,否则执行 `nvm list` `nvm install` 等命令的

# 时候没办法列出或者安装对应的版本

$ nvm ls-remote

# 但是我们使用最新版本的 node 执行安装操作，这样才能干净的进行缓存

# 否则在我们后续安装 verdaccio 的时候，数据是已经缓存过的了

$ nvm install 20.11.0

# 没有特殊情况下，建议把刚刚安装的版本设置为默认版本

$ nvm alias default 20.11.0

# 安装 verdaccio

$ npm install --location=global verdaccio

# 全局安裝 npm 源管理工具（可以快速切换仓库源）

$ npm install --location=global nrm

# 添加一个私有 npm 源，'verdaccio' 为自定义的源地址名称

$ nrm add verdaccio http://localhost:4873/

# 如果需要还原到默认设置，只需要删除当前用户下的 .nrmrc 文件即可

$ rm -rf .nrmrc

配置 verdaccio 从华为镜像服务器地址下载，默认配置服务器地址国内访问可能存在问题。另外注意禁用 npm-audit ，安全审计会非常非常慢，而且经常失败。

修改后的完整配置如下：

#
# This is the default configuration file. It allows all users to do anything,
# please read carefully the documentation and best practices to
# improve security.
#
# Look here for more config file examples:
# https://github.com/verdaccio/verdaccio/tree/5.x/conf
#
# Read about the best practices
# https://verdaccio.org/docs/best

# path to a directory with all packages
storage: /Users/xxxx/.local/share/verdaccio/storage
# path to a directory with plugins to include
plugins: ./plugins

# https://verdaccio.org/docs/webui
web:
  title: Verdaccio
  # comment out to disable gravatar support
  # gravatar: false
  # by default packages are ordercer ascendant (asc|desc)
  # sort_packages: asc
  # convert your UI to the dark side
  # darkMode: true
  # html_cache: true
  # by default all features are displayed
  # login: true
  # showInfo: true
  # showSettings: true
  # In combination with darkMode you can force specific theme
  # showThemeSwitch: true
  # showFooter: true
  # showSearch: true
  # showRaw: true
  # showDownloadTarball: true
  #  HTML tags injected after manifest <scripts/>
  # scriptsBodyAfter:
  #    - '<script type="text/javascript" src="https://my.company.com/customJS.min.js"></script>'
  #  HTML tags injected before ends </head>
  #  metaScripts:
  #    - '<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>'
  #    - '<script type="text/javascript" src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js"></script>'
  #    - '<meta name="robots" content="noindex" />'
  #  HTML tags injected first child at <body/>
  #  bodyBefore:
  #    - '<div id="myId">html before webpack scripts</div>'
  #  Public path for template manifest scripts (only manifest)
  #  publicPath: http://somedomain.org/

# https://verdaccio.org/docs/configuration#authentication
auth:
  htpasswd:
    file: ./htpasswd
    # Maximum amount of users allowed to register, defaults to "+inf".
    # You can set this to -1 to disable registration.
    # max_users: 1000
    # Hash algorithm, possible options are: "bcrypt", "md5", "sha1", "crypt".
    # algorithm: bcrypt # by default is crypt, but is recommended use bcrypt for new installations
    # Rounds number for "bcrypt", will be ignored for other algorithms.
    # rounds: 10

# https://verdaccio.org/docs/configuration#uplinks
# a list of other known repositories we can talk to
uplinks:
  # npmjs:
  #   url: https://registry.npmjs.org/
  # 注意依赖顺序，一定要把 ohpm 放在最前面，先去 ohpm 更新，有些依赖，两个镜像上都存在，后面会出现冲突的情况
  ohpm:
    url: https://ohpm.openharmony.cn/ohpm/  
  ohpm2:
    url: https://repo.harmonyos.com/ohpm/
  oh_npm:
    url: https://repo.harmonyos.com/npm/
  npm_mirror:
    url: https://mirrors.huaweicloud.com/repository/npm/

# Learn how to protect your packages
# https://verdaccio.org/docs/protect-your-dependencies/
# https://verdaccio.org/docs/configuration#packages
packages:
  '@*/*':
    # scoped packages
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: ohpm oh_npm npm_mirror

  '**':
    # allow all users (including non-authenticated users) to read and
    # publish all packages
    #
    # you can specify usernames/groupnames (depending on your auth plugin)
    # and three keywords: "$all", "$anonymous", "$authenticated"
    access: $all

    # allow all known users to publish/publish packages
    # (anyone can register by default, remember?)
    publish: $authenticated
    unpublish: $authenticated

    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: ohpm oh_npm npm_mirror

# To improve your security configuration and  avoid dependency confusion
# consider removing the proxy property for private packages
# https://verdaccio.org/docs/best#remove-proxy-to-increase-security-at-private-packages

# https://verdaccio.org/docs/configuration#server
# You can specify HTTP/1.1 server keep alive timeout in seconds for incoming connections.
# A value of 0 makes the http server behave similarly to Node.js versions prior to 8.0.0, which did not have a keep-alive timeout.
# WORKAROUND: Through given configuration you can workaround following issue https://github.com/verdaccio/verdaccio/issues/301. Set to 0 in case 60 is not enough.
server:
  keepAliveTimeout: 60
  # Allow `req.ip` to resolve properly when Verdaccio is behind a proxy or load-balancer
  # See: https://expressjs.com/en/guide/behind-proxies.html
  # trustProxy: '127.0.0.1'

# https://verdaccio.org/docs/configuration#offline-publish
# publish:
#   allow_offline: false

# https://verdaccio.org/docs/configuration#url-prefix
# url_prefix: /verdaccio/
# VERDACCIO_PUBLIC_URL='https://somedomain.org';
# url_prefix: '/my_prefix'
# // url -> https://somedomain.org/my_prefix/
# VERDACCIO_PUBLIC_URL='https://somedomain.org';
# url_prefix: '/'
# // url -> https://somedomain.org/
# VERDACCIO_PUBLIC_URL='https://somedomain.org/first_prefix';
# url_prefix: '/second_prefix'
# // url -> https://somedomain.org/second_prefix/'

# https://verdaccio.org/docs/configuration#security
# security:
#   api:
#     legacy: true
#     jwt:
#       sign:
#         expiresIn: 29d
#       verify:
#         someProp: [value]
#    web:
#      sign:
#        expiresIn: 1h # 1 hour by default
#      verify:
#         someProp: [value]

# https://verdaccio.org/docs/configuration#user-rate-limit
# userRateLimit:
#   windowMs: 50000
#   max: 1000

# https://verdaccio.org/docs/configuration#max-body-size
# max_body_size: 10mb

# https://verdaccio.org/docs/configuration#listen-port
# listen:
# - localhost:4873            # default value
# - http://localhost:4873     # same thing
# - 0.0.0.0:4873              # listen on all addresses (INADDR_ANY)
# - https://example.org:4873  # if you want to use https
# - "[::1]:4873"                # ipv6
# - unix:/tmp/verdaccio.sock    # unix socket

# The HTTPS configuration is useful if you do not consider use a HTTP Proxy
# https://verdaccio.org/docs/configuration#https
# https:
#   key: ./path/verdaccio-key.pem
#   cert: ./path/verdaccio-cert.pem
#   ca: ./path/verdaccio-csr.pem

# https://verdaccio.org/docs/configuration#proxy
# http_proxy: http://something.local/
# https_proxy: https://something.local/

# https://verdaccio.org/docs/configuration#notifications
# notify:
#   method: POST
#   headers: [{ "Content-Type": "application/json" }]
#   endpoint: https://usagge.hipchat.com/v2/room/3729485/notification?auth_token=mySecretToken
#   content: '{"color":"green","message":"New package published: * {{ name }}*","notify":true,"message_format":"text"}'

middlewares:
  audit:
    enabled: false

# https://verdaccio.org/docs/logger
# log settings
log: { type: stdout, format: pretty, level: http }
#experiments:
#  # support for npm token command
#  token: false
#  # disable writing body size to logs, read more on ticket 1912
#  bytesin_off: false
#  # enable tarball URL redirect for hosting tarball with a different server, the tarball_url_redirect can be a template string
#  tarball_url_redirect: 'https://mycdn.com/verdaccio/${packageName}/${filename}'
#  # the tarball_url_redirect can be a function, takes packageName and filename and returns the url, when working with a js configuration file
#  tarball_url_redirect(packageName, filename) {
#    const signedUrl = // generate a signed url
#    return signedUrl;
#  }

# translate your registry, api i18n not available yet
# i18n:
# list of the available translations https://github.com/verdaccio/verdaccio/blob/master/packages/plugins/ui-theme/src/i18n/ABOUT_TRANSLATIONS.md
#   web: en-US

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

# This is the default configuration file. It allows all users to do anything,

# please read carefully the documentation and best practices to

# improve security.

# Look here for more config file examples:

# https://github.com/verdaccio/verdaccio/tree/5.x/conf

# Read about the best practices

# https://verdaccio.org/docs/best

# path to a directory with all packages

storage: /Users/xxxx/.local/share/verdaccio/storage

# path to a directory with plugins to include

plugins: ./plugins

# https://verdaccio.org/docs/webui

web:

title: Verdaccio

# comment out to disable gravatar support

# gravatar: false

# by default packages are ordercer ascendant (asc|desc)

# sort_packages: asc

# convert your UI to the dark side

# darkMode: true

# html_cache: true

# by default all features are displayed

# login: true

# showInfo: true

# showSettings: true

# In combination with darkMode you can force specific theme

# showThemeSwitch: true

# showFooter: true

# showSearch: true

# showRaw: true

# showDownloadTarball: true

# HTML tags injected after manifest <scripts/>

# scriptsBodyAfter:

# - '<script type="text/javascript" src="https://my.company.com/customJS.min.js"></script>'

# HTML tags injected before ends </head>

# metaScripts:

# - '<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>'

# - '<script type="text/javascript" src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js"></script>'

# - '<meta name="robots" content="noindex" />'

# HTML tags injected first child at <body/>

# bodyBefore:

# - '<div id="myId">html before webpack scripts</div>'

# Public path for template manifest scripts (only manifest)

# publicPath: http://somedomain.org/

# https://verdaccio.org/docs/configuration#authentication

auth:

htpasswd:

file: ./htpasswd

# Maximum amount of users allowed to register, defaults to "+inf".

# You can set this to -1 to disable registration.

# max_users: 1000

# Hash algorithm, possible options are: "bcrypt", "md5", "sha1", "crypt".

# algorithm: bcrypt # by default is crypt, but is recommended use bcrypt for new installations

# Rounds number for "bcrypt", will be ignored for other algorithms.

# rounds: 10

# https://verdaccio.org/docs/configuration#uplinks

# a list of other known repositories we can talk to

uplinks:

# npmjs:

# url: https://registry.npmjs.org/

# 注意依赖顺序，一定要把 ohpm 放在最前面，先去 ohpm 更新，有些依赖，两个镜像上都存在，后面会出现冲突的情况

ohpm:

url: https://ohpm.openharmony.cn/ohpm/

ohpm2:

url: https://repo.harmonyos.com/ohpm/

oh_npm:

url: https://repo.harmonyos.com/npm/

npm_mirror:

url: https://mirrors.huaweicloud.com/repository/npm/

# Learn how to protect your packages

# https://verdaccio.org/docs/protect-your-dependencies/

# https://verdaccio.org/docs/configuration#packages

packages:

'@*/*':

# scoped packages

access: $all

publish: $authenticated

unpublish: $authenticated

proxy: ohpm oh_npm npm_mirror

'**':

# allow all users (including non-authenticated users) to read and

# publish all packages

# you can specify usernames/groupnames (depending on your auth plugin)

# and three keywords: "$all", "$anonymous", "$authenticated"

access: $all

# allow all known users to publish/publish packages

# (anyone can register by default, remember?)

publish: $authenticated

unpublish: $authenticated

# if package is not available locally, proxy requests to 'npmjs' registry

proxy: ohpm oh_npm npm_mirror

# To improve your security configuration and avoid dependency confusion

# consider removing the proxy property for private packages

# https://verdaccio.org/docs/best#remove-proxy-to-increase-security-at-private-packages

# https://verdaccio.org/docs/configuration#server

# You can specify HTTP/1.1 server keep alive timeout in seconds for incoming connections.

# A value of 0 makes the http server behave similarly to Node.js versions prior to 8.0.0, which did not have a keep-alive timeout.

# WORKAROUND: Through given configuration you can workaround following issue https://github.com/verdaccio/verdaccio/issues/301. Set to 0 in case 60 is not enough.

server:

keepAliveTimeout: 60

# Allow `req.ip` to resolve properly when Verdaccio is behind a proxy or load-balancer

# See: https://expressjs.com/en/guide/behind-proxies.html

# trustProxy: '127.0.0.1'

# https://verdaccio.org/docs/configuration#offline-publish

# publish:

# allow_offline: false

# https://verdaccio.org/docs/configuration#url-prefix

# url_prefix: /verdaccio/

# VERDACCIO_PUBLIC_URL='https://somedomain.org';

# url_prefix: '/my_prefix'

# // url -> https://somedomain.org/my_prefix/

# VERDACCIO_PUBLIC_URL='https://somedomain.org';

# url_prefix: '/'

# // url -> https://somedomain.org/

# VERDACCIO_PUBLIC_URL='https://somedomain.org/first_prefix';

# url_prefix: '/second_prefix'

# // url -> https://somedomain.org/second_prefix/'

# https://verdaccio.org/docs/configuration#security

# security:

# api:

# legacy: true

# jwt:

# sign:

# expiresIn: 29d

# verify:

# someProp: [value]

# web:

# sign:

# expiresIn: 1h # 1 hour by default

# verify:

# someProp: [value]

# https://verdaccio.org/docs/configuration#user-rate-limit

# userRateLimit:

# windowMs: 50000

# max: 1000

# https://verdaccio.org/docs/configuration#max-body-size

# max_body_size: 10mb

# https://verdaccio.org/docs/configuration#listen-port

# listen:

# - localhost:4873 # default value

# - http://localhost:4873 # same thing

# - 0.0.0.0:4873 # listen on all addresses (INADDR_ANY)

# - https://example.org:4873 # if you want to use https

# - "[::1]:4873" # ipv6

# - unix:/tmp/verdaccio.sock # unix socket

# The HTTPS configuration is useful if you do not consider use a HTTP Proxy

# https://verdaccio.org/docs/configuration#https

# https:

# key: ./path/verdaccio-key.pem

# cert: ./path/verdaccio-cert.pem

# ca: ./path/verdaccio-csr.pem

# https://verdaccio.org/docs/configuration#proxy

# http_proxy: http://something.local/

# https_proxy: https://something.local/

# https://verdaccio.org/docs/configuration#notifications

# notify:

# method: POST

# headers: [{ "Content-Type": "application/json" }]

# endpoint: https://usagge.hipchat.com/v2/room/3729485/notification?auth_token=mySecretToken

# content: '{"color":"green","message":"New package published: * {{ name }}*","notify":true,"message_format":"text"}'

middlewares:

audit:

enabled: false

# https://verdaccio.org/docs/logger

# log settings

log: { type: stdout, format: pretty, level: http }

#experiments:

# # support for npm token command

# token: false

# # disable writing body size to logs, read more on ticket 1912

# bytesin_off: false

# # enable tarball URL redirect for hosting tarball with a different server, the tarball_url_redirect can be a template string

# tarball_url_redirect: 'https://mycdn.com/verdaccio/${packageName}/${filename}'

# # the tarball_url_redirect can be a function, takes packageName and filename and returns the url, when working with a js configuration file

# tarball_url_redirect(packageName, filename) {

# const signedUrl = // generate a signed url

# return signedUrl;

# }

# translate your registry, api i18n not available yet

# i18n:

# list of the available translations https://github.com/verdaccio/verdaccio/blob/master/packages/plugins/ui-theme/src/i18n/ABOUT_TRANSLATIONS.md

# web: en-US

启动一个独立的Shell 运行 verdaccio

$ nvm use 20.11.0

$ verdaccio                                
 info --- config file  - /Users/xxxx/.config/verdaccio/config.yaml
 info --- the "crypt" algorithm is deprecated consider switch to "bcrypt" in the configuration file. Read the documentation for additional details
 info --- using htpasswd file: /Users/xxxx/.config/verdaccio/htpasswd
 info --- plugin successfully loaded: verdaccio-htpasswd
 info --- plugin successfully loaded: verdaccio-audit
 warn --- http address - http://localhost:4873/ - verdaccio/5.29.0

$ nvm use 20.11.0

$ verdaccio

info --- config file - /Users/xxxx/.config/verdaccio/config.yaml

info --- the "crypt" algorithm is deprecated consider switch to "bcrypt" in the configuration file. Read the documentation for additional details

info --- using htpasswd file: /Users/xxxx/.config/verdaccio/htpasswd

info --- plugin successfully loaded: verdaccio-htpasswd

info --- plugin successfully loaded: verdaccio-audit

warn --- http address - http://localhost:4873/ - verdaccio/5.29.0

清理缓存，并且要求通过 verdaccio 代理下载：

$ nvm use 20.11.0

# 'verdaccio' 为添加源时定义的源地址名称
$ nrm use verdaccio

# 列出缓存目录路径
$ npm config ls -l | grep cache

# 清理缓存
$ npm cache clean --force

$ nvm use 20.11.0

# 'verdaccio' 为添加源时定义的源地址名称

$ nrm use verdaccio

# 列出缓存目录路径

$ npm config ls -l | grep cache

# 清理缓存

$ npm cache clean --force

当前(2024/02/01)申请并通过了华为开发计划的才可以下载到 HarmonyOS NEXT 开发需要的 HUAWEI DevEco Studio 4.x 版本(API 11)，HUAWEI DevEco Studio 5.x (API 11、API 12) HarmonyOS Developer管理中心套件货架目前只有这个版本的包含离线鸿蒙开发依赖 ohpm-repo，官方文档以及报错信息还是稀烂，基本找不到有用信息，需要自己研究。

注意：目前测试发现 DevEco Studio 4.1.3.500 版本无法真机调试 C++ 代码。 DevEco Studio 4.1.3.501 版本可以正常调试。

截止 2024/04/01 最新Release版本是 DevEco Studio 4.1.3.700，最新测试版本 DevEco Studio 5.0.3.100(SP1)，可惜编译不通过，报错如下：

ERR_PNPM_NO_MATCHING_VERSION  No matching version found for @ohos/hvigor-ohos-plugin@4.2.0

1	ERR_PNPM_NO_MATCHING_VERSION No matching version found for @ohos/hvigor-ohos-plugin@4.2.0

DevEco Studio 4.1.3.501 使用的官方SDK下载地址：

下载完成后，解压缩到 SDK 目录下的 HarmonyOS-NEXT-DP1 目录即可，如下图：

继续阅读基于 Verdaccio 搭建鸿蒙（HarmonyOS Next）开发的轻量级 Node.js 私有仓库

Flutter中AspectRatio、Card 卡片组件

1. AspectRatio 组件

AspectRatio 的作用是根据设置调整子元素 child 的宽高比。

AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。

如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先适应布局限制条件，而忽略所设置的比率。

常见属性：

1. aspectRatio 宽高比。页面最终也许不会按这个值去布局，具体则要看综合因素，这只是一个参考值；

2. child 子组件。值的类型为Widget；

代码示例：

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            // 主题
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// AspectRatio组件的用法
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return AspectRatio(
            // 高度与宽度的比值
            aspectRatio: 5.0/1.0 ,
            child:Container(
                color:Colors.red
            )
        );
    }
}

import 'package:flutter/material.dart';

void main(){

runApp(MyApp());

}

// 抽离成一个单独的组件

class MyApp extends StatelessWidget{

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

// 导航条

appBar:AppBar(title:Text('Flutter App')),

// 主体

body:HomeContent(),

// 主题

theme: ThemeData(primarySwatch:Colors.yellow),

);

}

// AspectRatio组件的用法

class HomeContent extends StatelessWidget{

@override

Widget build(BuildContext context) {

return AspectRatio(

// 高度与宽度的比值

aspectRatio: 5.0/1.0 ,

child:Container(

color:Colors.red

)

);

}

继续阅读Flutter中AspectRatio、Card 卡片组件

Flutter-Container详解

概述

Container是一个拥有绘制、定位、调整大小的 widget，是开发中最常用、最基础的组件。虽然最基础但不可小觑，熟悉每一个属性可以帮助我们更好更快的实现想要的效果，避免走弯路，也能避免代码冗余。本文主要针对其属性进行讲解。

属性

  Container({
    Key? key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })

Container({

Key? key,

this.alignment,

this.padding,

this.color,

this.decoration,

this.foregroundDecoration,

double? width,

double? height,

BoxConstraints? constraints,

this.margin,

this.transform,

this.transformAlignment,

this.child,

this.clipBehavior = Clip.none,

})

key

key用于控制控件如何取代树中的另一个控件，即若widget指定了相同的key，则这些widget可以复用。如果widget的key值不为空，会判断key._currentElement值所指向的widget，和当前widget的类型key都相同，那么就从旧的父节点上移除，作为当前的节点的子widget之一，否则将进行真实的创建新的Element。若开发中对组建的复用没有较高要求，一般不设置该属性。

继续阅读Flutter-Container详解

Riverpod AsyncNotifier 的用法

Riverpod AsyncNotifier may sound a litle confusing if you are just coming to Riverpod. After all Riverpod and the latest versions they introduced many concepts. AsyncNotifier works with AsyncNotifierProvider. AsyncNotifier is a wrapper around your state or data which works asyncronomously(await and async).

继续阅读Riverpod AsyncNotifier 的用法

WordPress通过自带的Thickbox实现简单的弹出窗口

One simple way of enabling pop-up windows right from your WordPress posts, is by using the Thickbox javascript library that comes with WordPress.

You can link the pop-up window to a HTML input element such as a button, or you can simply link the pop-up window to a HTML hyperlink. Below we show examples of both –

Show Thickbox Example Pop-up 2

How to Add Pop-up Windows to Your WordPress Posts

Step 1

You need to add thickbox to your WordPress post. You can do this by adding the add_thickbox function to the ‘init’ function of your theme. In particular, add the code below to your theme functions.php file.

<?php
add_action('init', 'init_theme_method');
 
function init_theme_method() {
   add_thickbox();
}
?>

<?php

add_action('init', 'init_theme_method');

function init_theme_method() {

add_thickbox();

}

Step 2

Now we can just add the button right in our post and link it to thickbox by specifying class=thickbox. Click on the HTML tab in your post editor and paste the HTML code below into your post.

<div style="text-align:center;padding:20px 0;"> 
<input alt="#TB_inline?height=300&width=400&inlineId=examplePopup1" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show Thickbox Example Pop-up 1" />  
</div>

</div>

Step 3

Finally, we specify the content that goes into our pop-up window by creating a div with id=examplePopup1.

<div id="examplePopup1" style="display:none">
<h2>Example Pop-up Window 1</h2>
<div style="float:left;padding:10px;">
<img src="https://shibashake.com/wordpress-theme/wp-content/uploads/2010/03/bio1.jpg"  width="150" height = "168"/>
</div>
I was born at DAZ Studio. They created me with utmost care and that is why I am the hottie that you see today. My interests include posing, trying out cute outfits, and more posing.
 
<select name=""><option>test</option></select>
 
<strong>Just click outside the pop-up to close it.</strong>
</div>


<strong>Just click outside the pop-up to close it.</strong>
</div>

<h2>Example Pop-up Window 1</h2>

</div>

I was born at DAZ Studio. They created me with utmost care and that is why I am the hottie that you see today. My interests include posing, trying out cute outfits, and more posing.

<strong>Just click outside the pop-up to close it.</strong>

</div>

<strong>Just click outside the pop-up to close it.</strong>

</div>

And just like that, we have our pop-up window.

There are a variety of other thickbox options including using iframes, displaying image galleries, and using AJAX content.

Only Include Thickbox as Necessary

While the example above works, it is not the most efficient because you are including the thickbox library into all of your WordPress posts, whether you are using it or not.

Ideally, you only want to include thickbox in those posts that actually require it.

One way to achieve this is by using the is_single or is_page WordPress functions to include thickbox on a post by post basis.

add_action('template_redirect', 'add_scripts');
 
function add_scripts() {
    if (is_single('2794')) {
      add_thickbox(); 
    }
}

add_action('template_redirect', 'add_scripts');

function add_scripts() {

if (is_single('2794')) {

add_thickbox();

}

Line 1 – Instead of tying the add_thickbox function to the init action hook, we tie it to the template_redirect action hook instead. This will allow us to properly use the is_single and is_page commands in our hook function.

Lines 4-6 – Only add thickbox to this post which has an id of 2794.

Include Thickbox Based on Post Tags

The solution above works well if you want to include pop-up windows to a small set of posts and pages. However, if you later decide to use pop-ups on a large set of posts, using is_single may quickly become unwieldy.

While you can pass in an array of posts to the is_single function, you will still need to list out the title or id of each and every post that uses thickbox.

A more elegent solution, is to include the thickbox libraries based on post tags.

<?php
function add_scripts() {
    global $wp_query;
    if (!is_singular() || !$wp_query->post) return;
    // Get post tags
    $tags = wp_get_object_terms($wp_query->post->ID, 'post_tag');
    foreach ($tags as $tag) {
        if ($tag->name == "thickbox") {
            add_thickbox();
            break;
        }
    }   
}
?>

<?php

function add_scripts() {

global $wp_query;

if (!is_singular() || !$wp_query->post) return;

// Get post tags

$tags = wp_get_object_terms($wp_query->post->ID, 'post_tag');

foreach ($tags as $tag) {

if ($tag->name == "thickbox") {

add_thickbox();

break;

}

Line 4 – We only add thickbox for single posts, pages, or attachments.

Line 6 – Get the post tags for the current post.
*Note*, we cannot used WordPress Loop functions at this point because the template_redirect action hook is called before the Loop is fully instantiated. However, query_vars has already been called, so the $wp_query global variable contains the values that we need.

Lines 7-12 – Check for the thickbox tag. If we find it, we add the thickbox library.

Now all we need to do is add the thickbox tag to posts that use the thickbox library and we are done.

参考链接

Coping with the TCP TIME-WAIT state on busy Linux servers

TL;DR

Do not enable net.ipv4.tcp_tw_recycle—it doesn’t even exist anymore since Linux 4.12. Most of the time, TIME-WAIT sockets are harmless. Otherwise, jump to the summary for the recommended solutions.

The Linux kernel documentation is not very helpful about what net.ipv4.tcp_tw_recycle and net.ipv4.tcp_tw_reuse do. This lack of documentation opens the path to numerous tuning guides advising to set both these settings to 1 to reduce the number of entries in the TIME-WAIT state. However, as stated by the tcp(7) manual page, the net.ipv4.tcp_tw_recycle option is quite problematic for public-facing servers as it won’t handle connections from two different computers behind the same NAT device, which is a problem hard to detect and waiting to bite you:

Enable fast recycling of TIME-WAIT sockets. Enabling this option is not recommended since this causes problems when wrking with NAT (Network Address Translation).

I will provide here a more detailed explanation of how to properly handle the TIME-WAIT state. Also, keep in mind we are looking at the TCP stack of Linux. This is completely unrelated to Netfilter connection tracking which may be tweaked in other ways.¹

继续阅读Coping with the TCP TIME-WAIT state on busy Linux servers

在Windows下像Linux一样安装程序 -- winget

用户可以在 Windows 10 和 Windows 11 计算机上使用 winget 命令行工具来发现、安装、升级、删除和配置应用程序。此工具是 Windows 程序包管理器服务的客户端接口。

安装 winget

Windows 程序包管理器 winget 命令行工具作为应用安装程序的一部分在 Windows 11 和现代版本的 Windows 10 上提供。

可以从 Microsoft Store 获取应用安装程序。如果已安装，请确保已将其更新为最新版本。

备注

winget 命令行工具仅在 Windows 10 1709（版本 16299）或更高版本上受支持。在你首次以用户身份登录 Windows（这会触发 Microsoft Store 将 Windows 程序包管理器注册为异步进程的一部分）之前，winget 工具不可用。如果最近已经以用户身份进行了首次登录，但发现 winget 尚不可用，则可以打开 PowerShell 并输入以下命令来请求此 winget 注册：Add-AppxPackage -RegisterByFamilyName -MainPackage Microsoft.DesktopAppInstaller_8wekyb3d8bbwe。

安装 winget 预览版 [仅限开发人员]

WinGet 包含在 Windows 应用安装程序中。要试用最新的 Windows 程序包管理器功能，可以通过以下方式之一安装预览版：

下载最新的 winget 预览版。阅读 winget 预览版发行说明，了解任何新功能。安装此包将为你提供 WinGet 客户端预览版，但它不会从 Microsoft Store 中启用新预览版的自动更新。
使用 Microsoft 帐户 (MSA)、工作、学校或 Azure Active Directory (AAD) 帐户注册 Windows 预览体验成员开发频道。 Windows 预览体验成员开发频道包括 Microsoft Store 中新预览版的自动更新。
使用 Microsoft 帐户 (MSA) 注册 Windows 程序包管理器预览体验计划。在添加你的 Microsoft 帐户 (MSA) 后（在你收到电子邮件通知后几天），你将收到 Microsoft Store 中新预览版的自动更新。

在 Windows 沙盒上安装 winget

Windows 沙盒提供了一个轻型桌面环境，可以安全地独立运行应用程序。安装在 Windows 沙盒环境中的软件保持“沙盒”状态，并独立于主机运行。 Windows 沙盒不包含 winget，也不包含 Microsoft Store 应用，因此你需要从 GitHub 上的 winget 版本页下载最新的 winget 包。

要在 Windows 沙盒上安装 winget 的稳定版本，请从 Windows PowerShell 命令提示符执行以下步骤：

$progressPreference = 'silentlyContinue'
Write-Information "Downloading WinGet and its dependencies..."
Invoke-WebRequest -Uri https://aka.ms/getwinget -OutFile Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle
Invoke-WebRequest -Uri https://aka.ms/Microsoft.VCLibs.x64.14.00.Desktop.appx -OutFile Microsoft.VCLibs.x64.14.00.Desktop.appx
Invoke-WebRequest -Uri https://github.com/microsoft/microsoft-ui-xaml/releases/download/v2.7.3/Microsoft.UI.Xaml.2.7.x64.appx -OutFile Microsoft.UI.Xaml.2.7.x64.appx
Add-AppxPackage Microsoft.VCLibs.x64.14.00.Desktop.appx
Add-AppxPackage Microsoft.UI.Xaml.2.7.x64.appx
Add-AppxPackage Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle

$progressPreference = 'silentlyContinue'

Write-Information "Downloading WinGet and its dependencies..."

Invoke-WebRequest -Uri https://aka.ms/getwinget -OutFile Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle

Invoke-WebRequest -Uri https://aka.ms/Microsoft.VCLibs.x64.14.00.Desktop.appx -OutFile Microsoft.VCLibs.x64.14.00.Desktop.appx

Invoke-WebRequest -Uri https://github.com/microsoft/microsoft-ui-xaml/releases/download/v2.7.3/Microsoft.UI.Xaml.2.7.x64.appx -OutFile Microsoft.UI.Xaml.2.7.x64.appx

Add-AppxPackage Microsoft.VCLibs.x64.14.00.Desktop.appx

Add-AppxPackage Microsoft.UI.Xaml.2.7.x64.appx

Add-AppxPackage Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle

如果需要程序包管理器的预览版或其他版本，请转到 https://github.com/microsoft/winget-cli/releases。复制你需要的版本 URL 并更新上述 URI。

有关 Windows 沙盒的详细信息，包括如何安装沙盒以及使用沙盒的预期结果，请参阅 Windows 沙盒文档。

管理员注意事项

安装程序的行为可能会有所不同，具体取决于你是否是以管理员权限运行 winget。

在没有管理员权限的情况下运行 winget 时，某些应用程序可能会要求提升权限才能进行安装。当安装程序运行时，Windows 会提示你提升权限。如果你选择不提升权限，则应用程序无法进行安装。
在管理员命令提示符下运行 winget 时，如果应用程序要求你提升权限，你不会看到提升权限提示。以管理员身份运行命令提示符时请务必小心，仅安装你信任的应用程序。

继续阅读在Windows下像Linux一样安装程序 -- winget

Flutter问题记录：runApp的时候报错：连接超时

问题：Launching lib\main.dart on ELE AL00 in debug mode...

Running Gradle task 'assembleDebug'...
Exception in thread "main" java.net.ConnectException: Connection timed out: connect
at java.net.DualStackPlainSocketImpl.connect0(Native Method)
at java.net.DualStackPlainSocketImpl.socketConnect(DualStackPlainSocketImpl.java:79)
at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:350)
at java.net.AbstractPlainSocketImpl.connectToAddress(AbstractPlainSocketImpl.java:206)
at java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:188)
at java.net.PlainSocketImpl.connect(PlainSocketImpl.java:172)
at java.net.SocksSocketImpl.connect(SocksSocketImpl.java:392)
at java.net.Socket.connect(Socket.java:589)
at sun.security.ssl.SSLSocketImpl.connect(SSLSocketImpl.java:666)
at sun.security.ssl.BaseSSLSocketImpl.connect(BaseSSLSocketImpl.java:173)
at sun.net.NetworkClient.doConnect(NetworkClient.java:180)
at sun.net.www.http.HttpClient.openServer(HttpClient.java:463)
at sun.net.www.http.HttpClient.openServer(HttpClient.java:558)
at sun.net.www.protocol.https.HttpsClient.<init>(HttpsClient.java:264)
at sun.net.www.protocol.https.HttpsClient.New(HttpsClient.java:367)
at sun.net.www.protocol.https.AbstractDelegateHttpsURLConnection.getNewHttpClient(AbstractDelegateHttpsURLConnection.java:191)
at sun.net.www.protocol.http.HttpURLConnection.plainConnect0(HttpURLConnection.java:1156)
at sun.net.www.protocol.http.HttpURLConnection.plainConnect(HttpURLConnection.java:1050)
at sun.net.www.protocol.https.AbstractDelegateHttpsURLConnection.connect(AbstractDelegateHttpsURLConnection.java:177)
at sun.net.www.protocol.http.HttpURLConnection.getInputStream0(HttpURLConnection.java:1564)
at sun.net.www.protocol.http.HttpURLConnection.getInputStream(HttpURLConnection.java:1492)
at sun.net.www.protocol.https.HttpsURLConnectionImpl.getInputStream(HttpsURLConnectionImpl.java:263)
at org.gradle.wrapper.Download.downloadInternal(Download.java:58)
at org.gradle.wrapper.Download.download(Download.java:44)
at org.gradle.wrapper.Install$1.call(Install.java:61)
at org.gradle.wrapper.Install$1.call(Install.java:48)
at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:65)
at org.gradle.wrapper.Install.createDist(Install.java:48)
at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:128)
at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)
Exception: Gradle task assembleDebug failed with exit code 1

Running Gradle task 'assembleDebug'...

Exception in thread "main" java.net.ConnectException: Connection timed out: connect

at java.net.DualStackPlainSocketImpl.connect0(Native Method)

at java.net.DualStackPlainSocketImpl.socketConnect(DualStackPlainSocketImpl.java:79)

at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:350)

at java.net.AbstractPlainSocketImpl.connectToAddress(AbstractPlainSocketImpl.java:206)

at java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:188)

at java.net.PlainSocketImpl.connect(PlainSocketImpl.java:172)

at java.net.SocksSocketImpl.connect(SocksSocketImpl.java:392)

at java.net.Socket.connect(Socket.java:589)

at sun.security.ssl.SSLSocketImpl.connect(SSLSocketImpl.java:666)

at sun.security.ssl.BaseSSLSocketImpl.connect(BaseSSLSocketImpl.java:173)

at sun.net.NetworkClient.doConnect(NetworkClient.java:180)

at sun.net.www.http.HttpClient.openServer(HttpClient.java:463)

at sun.net.www.http.HttpClient.openServer(HttpClient.java:558)

at sun.net.www.protocol.https.HttpsClient.<init>(HttpsClient.java:264)

at sun.net.www.protocol.https.HttpsClient.New(HttpsClient.java:367)

at sun.net.www.protocol.https.AbstractDelegateHttpsURLConnection.getNewHttpClient(AbstractDelegateHttpsURLConnection.java:191)

at sun.net.www.protocol.http.HttpURLConnection.plainConnect0(HttpURLConnection.java:1156)

at sun.net.www.protocol.http.HttpURLConnection.plainConnect(HttpURLConnection.java:1050)

at sun.net.www.protocol.https.AbstractDelegateHttpsURLConnection.connect(AbstractDelegateHttpsURLConnection.java:177)

at sun.net.www.protocol.http.HttpURLConnection.getInputStream0(HttpURLConnection.java:1564)

at sun.net.www.protocol.http.HttpURLConnection.getInputStream(HttpURLConnection.java:1492)

at sun.net.www.protocol.https.HttpsURLConnectionImpl.getInputStream(HttpsURLConnectionImpl.java:263)

at org.gradle.wrapper.Download.downloadInternal(Download.java:58)

at org.gradle.wrapper.Download.download(Download.java:44)

at org.gradle.wrapper.Install$1.call(Install.java:61)

at org.gradle.wrapper.Install$1.call(Install.java:48)

at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:65)

at org.gradle.wrapper.Install.createDist(Install.java:48)

at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:128)

at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)

Exception: Gradle task assembleDebug failed with exit code 1

解决方案：

1、调整项目空间中的gradle-wrapper.properties文件中的URL，改为你本地最新的gradle版本就好

如：

distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-all.zip

1	distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-all.zip

2、调整Android包中的build.gradle文件中的kotlin版本号：跟本地kotlin版本同步就行

如：ext.kotlin_version = '1.3.50'

参考链接

Flutter问题记录：runApp的时候报错：连接超时

MacBook Pro 2023-Apple M2 Pro使用Fn按键作为标准功能键

在按下某个功能键的同时按住功能 (Fn)/地球键。例如，同时按下 Fn 和 F12（扬声器图标）可执行分配给 F12 键的操作，而不是提高扬声器的音量¹。如果你的键盘没有 Fn 键，请尝试在按下某个功能键的同时按住 Control 键。

更改按键的默认行为

如果你要更改顶行按键以使它们在无需按住 Fn 键的情况下用作标准功能键，请按照以下步骤操作，具体取决于你使用的 macOS 版本：

macOS Ventura

选取苹果菜单  >“系统设置”。
点按边栏中的“键盘”。
点按右侧的“键盘快捷键”按钮。
点按边栏中的“功能键”。
打开“将 F1、F2 等键用作标准功能键”²

更低版本的 macOS

选取苹果菜单  >“系统偏好设置”。
点按“键盘”。
选择“将 F1、F2 等键用作标准功能键”²

参考链接

使用按键作为标准功能键

升级Flutter 3.13.x 之后出现watcher-1.0.2报错

Failed to build intl_utils:generate:
../../../.pub-cache/hosted/pub.flutter-io.cn/watcher-1.0.2/lib/src/constructable_file_system_event.dart:7:57: Error: The class 'FileSystemEvent' can't be extended, implemented, or mixed in outside of its library because it's a sealed class.
abstract class _ConstructableFileSystemEvent implements FileSystemEvent {

Failed to build intl_utils:generate:

../../../.pub-cache/hosted/pub.flutter-io.cn/watcher-1.0.2/lib/src/constructable_file_system_event.dart:7:57: Error: The class 'FileSystemEvent' can't be extended, implemented, or mixed in outside of its library because it's a sealed class.

abstract class _ConstructableFileSystemEvent implements FileSystemEvent {

请尝试

dart pub upgrade

1	dart pub upgrade

命令，如果还是报错

dart pub cache repair

1	dart pub cache repair

这样我们就可以使用到最新的watcher-1.1.0版本，就不会出现上面这个报错了。

2024 年 11 月
一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30