层叠布局

层叠布局类似于H5中的绝对定位,主要利用Stack与Positioned完成.Stack表示使用层叠布局,并设置未定位组件的默认位置AligmentDirectional.topStart,而Positioned指示子组件如何定位.

Stack

1. textDirection 与前面学习的RowColumn相同,表示组件起始位置,同时也是aligment的参考点.
2. aligment,默认值为AligmentDirectional.topStart,当某一子组件缺省定位的话,将使用该属性
3. fit,指示没有定位的子组件如何确定自身大小,Fit.loose表示使用子组件自身大小,Fit.expand表示最大化子组件到Stack的大小
4. clipBehavior,如果子组件超出Stack,应当如何裁剪

ConstrainedBox(
    constraints:BoxConstraints.expand(),
    child:Stack(
        textDirection:TextDirection.ltr,
        aligment:AligmentDirectional.center,
        fit:Fit.expand,
        clipBehavior:Clip.hardEdge,
        children:[
            Positioned(
                child:Text("first widget"),
                top:20
            ),
            Container(
                color:Colors.red,
                width:200,
                height:200
            ),
            Positioned(
                child:Text("third widget"),
                left:20
            )
        ]
    )
)

以上代码将渲染一个全屏背景为红色第二个组件,以及一个 third widget的文本,为什么？

1. 即使我们指定了Container的宽高度,但由于我们在Stack上指定了Fit.expand以撑开子组件为Stack最大宽高度.而Container并未指定位置,所以将显示一个全屏的红色.
2. 由于Stack是层叠布局,所以第一个元素将被全屏的Container所遮盖,即第一个子组件实际上在Container下层.
3. 我们只给第三个Positioned指定了left属性,并未指定top/bottom,所以是没法定位的,这时使用了Stack的aligment属性,所以该组件将在屏幕中央距离左侧20的位置显示.

Positioned

positioned组件较为简单,其中top、right、bottom、left分别代表上、右、下、左四个方位,而width、height则表示定位元素的宽高度,并且会覆盖元素所定义的宽高度.但是要注意,这两个属性还要参与配合top、right、bottom、left进行定位.比如,我们不能同时指定水平方向的left、right、width.因为当我们指定了left和right后,宽度其实已经算出来了,举一反三,当我们同时指任意两个属性时,第三个属性已经算出来,再指定,必然会报错.垂直方向同理.

Positioned(
    left:10,
    top:10,
    width:100,
    height:100,
    child:Container(
        color:Colors.blue[200]
    )
)

上面我们提到,width和height会确认自组件的大小,并覆盖掉子组件设置的宽高度.如果我们就想用子组件的呢?肯定是掏出我们在布局约束与原理中学到的unconstrinedBox啦,不过要注意, unconstrainedBox只是不会将约束透传给子组件,其自身还是受到Positioned大小的影响滴.

Wrap 布局

wrap 布局比较简单,其直接继承自multiChildRenderObjectWeight,大部分属性与 Flex 布局相同,但要注意有三个额外属性.

1. spacing：子组件在主轴的间隔距离,如果指定了aligment的属性为WrapAligment.spaceAround/spanceBetween/spaceEvenly,则该属性无效
2. runSpacing：子组件在交叉轴的的间隔距离
3. runAligment：子组件在交叉轴的布局方式,注意,交叉轴默认大小为子组件高度/宽度总和,所以如果需要使用该属性,请使用ConstrainedBox约束

List<Widget> children =
      ["王大锤", "张三三", "刘大鹅", "yukyao", "静静", "朱大春", "党中央"].map((e) => Chip(
            label: Text(e),
            avatar: CircleAvatar(
              child: Text(e.substring(0, 1)),
              backgroundColor: Colors.blue[200],
            ),
          )).toList();
ConstrainedBox(
    constraints:BoxConstraints(minHeight:double.Infinty),
    child:Wrap(
    aligment:WrapAligment.center,
    spacing:8.0,
    runSpacing:10.0,
    runAligment:WrapAligment.end,
    children:children
)
)

⚠：布局方式默认为水平布局,那么如果不强制指定minHeight的话,默认高度即为组件高度,即使定义了runAligment的值为WrapAligment.center,也不会在屏幕居中显示.

Flex 布局

flex 布局类似于 H5 中的 flex,较为简单,主要有以下几点

布局的基本要义

flex 中需要定义布局方向,其direction的取值分别为Axis.horizontal (水平布局)与Axis.vertical(垂直布局),flex 布局继承自MutipleChildrenRenderObjectWeight,其对应的 renderObject 为RenderFlex

👇 这个例子简单描述了 flex 的基本使用.其中,Expanded组件仅用于 Flex 中,当然也包括Row与Column.毕竟,这两个是 Flex 的封装

Flex(direction:Axis.horizontal,children:[
    Expanded(child:Container(color:Colors.red),flex:1),
    Expanded(child:Container(Color:Colors.blue[200]),flex:2)
])

👇 而这个例子则表明了 Flex 在垂直布局中的使用

Flex(direction:Axis.vertical,children:[
    Expanded(child:Container(color:Colors.red),flex:1),
    Spacer(flex:1), // Expanded的便捷封装
    Expanded(child:Container(color:Colors.blue[200]),flex:1)
])

⚠:以上例子有个重要问题,没有指定 Flex 高度,编辑器将报错,我们可以在外套一层SizedBox,显式指定即可.

每日单词拼写

线性布局

flutter 中线性布局主要有两类，Row(行 水平布局)和Column(列 垂直布局),均继承自Flex布局

Row 布局

Row((
    textDirection:TextDirection.ltr,
    mainAxisSize:MainAxisSize.Max,
    mainAxisAligment:MainAxisAligment.spanceBetween,
    verticalDirectiont:VerticalAligment.down,
    crossAxisAligment:CrocessAxisAligment.start,
))

1. textDirection 子组件排列方向，按照当前系统预览排列,中/英文为从左到右,阿拉伯语言为从右到左

2. mainAxisSize 前布局的主轴占用的空间,可以为 min/max,为 min 时,空间为子 weight 实际大小的总和,为 max 时,表示尽可能占据整个屏幕

3. mainAxisAligment 当 MainAxisSize 为 max 时,子组件在主轴的排列方式,类似于 H5 中 flex 布局的 just-content，当 MainAxisSize 为 min 时,此属性无效

4. verticalDirection 纵轴的对齐方向,默认为 down,表示从上到下 👇,反之,up 即为从下到上 👆

5. corssAxisAligment 用于定义纵轴的对齐方式,默认为center,表示居中对齐.该参考系为verticalDirection

   verticalDirection	down	up
   crossAxisAligment.start	顶部对齐	底部对齐
   crossAxisAligment.end	底部对齐	顶部对齐
   crossAxisAligment.center	居中对齐	居中对齐

Column 布局

Column 的主轴与纵轴正好与 Row 相反

Column 与 Row 均会尽量占据主轴最大空间,即 Row 的宽度为屏幕宽度,而 Column 的长度为屏幕长度.纵轴则是子组件中占用最大的空间大小,如果想延申纵轴长度,就可以使用之前提到的ConstrainedBox或者SizedBox.

每日单词拼写

关于在 IDE 中如何启用代码辅助工具

以下两种方法其实是通用的，只是由于我接触的时间不同，所以安装了两个版本。大家任选其一。

ChatGPT

1.已拥有官方 Key

在已拥有官方 Key 的情况下，配置较为简单。在 vscode 插件市场搜索 Genie AI。安装完成后,在侧边栏会自动加载。

接着我们打开vscode setting,搜索genieAI,可以看到一系列相关配置，比如自定义名称以及模型选择。

在设置中并没有找到关于key的配置。不过，当你打开侧边栏 Genie时，直接询问，会有相应的prompt，这时可以填入自己的api key。

2.在Api2D申请的Key

可以下载独立开发者Easy在官方插件基础上编译的支持GPT 4版本的 vscode 插件将其拖拽至vscode中即可。

同样在vscode setting中搜索关键字chatgpt，这里我们主要关注两个点，一个是api key的填写，第二个是请求地址，我们需要改为api2d提供的host。

小小总结，就美观程度而言，Genie AI 要美观得多，且粘贴文本有换行，我是颜控

现在可以愉快的把代码丢给AI改bug了

warning⚠️ api2d申请的key不能填写OpenAI的host，两者并不通用，反之亦然。

Amazon Codewhisperer

Amazon于近日开放的代码辅助工具，当前已向普通开发者开放。但是从各渠道收集到的反馈。略逊于 Github Copilot。but，有总比没有强。now let’s enjoy it

1. 首先我们在vscode 插件市场中 搜索 AWS Toolkit，直接安装即可
2. 开启拓展，此步骤需要使用Amazon Build ID授权，建议观看视频配置
3. 当我们在文件中生成好注释，就可以让其自动生成代码啦
   

优点

• 支持中文注释
• 生成普通函数返回较快

缺点

• 有时并不能根据注释生成正确代码，需不断调整 猜测和Amazon 版权问题有关
• 生成较慢，平均等待时常超过10s

Codeium

Codeium是由discord公司开发的一款代码辅助工具，对于个人开发者永久免费，但是也有对应的商业版本。

1. 在插件市场中搜索codeium并安装

2. 首次打开codeium会下载language server
3. 根据拓展提示需要在浏览器端登录并获取token登录
4. 当前codeium开启了两个功能 chat与search其中chat暂未开放，search功能主要针对与当前项目的代码搜索
   

优点

• 同样支持中文注释
• 生成比aws tools 较快(可能是科学上网的原因)
• 提醒数较多

缺点

• 复杂情况处理一般，更多用于生成通用函数

布局简介

flutter 中布局类组件通常具有一个或多个子组件,根据排列方式不同,通常分为以下三类

布局类组件直接或间接继承SingleChildRenderObjectWidget和MultiChildRenderObjectWidget,
继承关系为Widget→RenderObjectWidget→Leaf/SingleChild/MultiChildRenderObjectWidget
在RenderObjectWidget中存在一个方法RenderObject,所有继承至RenderObjectWidget的组件都必须实现该方法.因为该方法是渲染 UI 界面,实现最终布局.

约束的基本要义

在 flutter 中分为两种布局模式RenderBox→盒模型与sliver (RenderSliver)→按需加载列表模型
不管哪种模型,都存在约束,父级传递约束到子级,子级根据自身大小以适应父级约束,比如父级传递约束为宽度最大 100,高度最大 100,然后我们定义了一个宽度均为 200 的子组件,则子组件最终渲染大小为 100*100.
BoxConstraints是盒模型中父组件传递给子组件的约束

const BoxConstraints = ({
    minHeight:0.0,
    maxHeight:double.Infinity,
    minWidth:0.0,
    maxWidth:double.Infinity
})

BoxConstraints还有一些便捷构造函数,BoxConstraints.tight(size)用于生成一个固定宽高的约束,BoxConstraints.expand()生成一个尽可能大的以满足子组件自身宽高的约束

SizedBox

SizedBox 提供了一个快捷定义宽高的约束

SizedBox({
    height:30,
    width:30,
    child: redBox
})

而以上只是对BoxConstraints.tightFor(width:30,height:30)的定制,而tightFor又等价于如下

BoxConstraints({
    width:30,
    maxWidth:30,
    height:30,
    maxHeight:30
})

多重约束

牢记一个理论 1.取最大值的 minHeight 与 minWidth 2.取最小值的 maxHeight 与 maxHeight

去除约束

可以使用UnconstrainedBox来解除父级约束对于子级的大小影响,但这不是真正的去除,只是约束作用于UnconstrainedBox的时候,UnconstrainedBox不会继续往下传递约束

ConstrainedBox(
    constraints:BoxConstraints(
        minHeight:200,
        minWidth:200
    ),
    child:UnconstrainedBox(
        child: ConstrainedBox(
            constraints:BoxConstraints(
                minHeight:100,
                minWidth:200
            ),
            child:redBox
        )
    )
)

如上述代码,将渲染一个 100 _ 100 的红色盒子,但是整个组件宽高依旧是 200 _ 200,这说明UnconstrainedBox没有继续往下透传约束

每日单词拼写

Go基础语法(变量,函数)

Go是2009年由google开源的一门编程语言，一般应用于服务端与云软件开发，其并发机制是独特的魅力，且Go是一种强化静态语言，当然，也支持部分的动态类型

   // fileName:mian.go

   // 程序主包，表示该应用是一个可执行程序
   package main

   // 引入第三方库包，当前我们引入了一个标准输出库包 "fmt" 
   import "fmt"

   // 程序主入口,有且只有一个
   func main(){
       fmt.println("hello")
   }

   # 编译并执行应用程序，常用于开发与测试应用
   go run main.go
   # 打包为一个不依赖Go环境的二进制可执行文件
   go build main.go

flutter状态管理基本思想与简易指南