flutter-Container

简介: flutter-Container

Container

是有多个widget组成的(LimitedBox->ConstrainedBox->Align->Padding->DecoratedBox->ConstrainedBox->Padding->Transform)

constraints:添加到child上额外的约束条件 最大最小值
current = ConstrainedBox(constraints: constraints, child: 
current);
alignment:控制child的对齐方式,
current = Align(alignment: alignment, child: current);
padding:文本区域和widget之间
current = Padding(padding: effectivePadding, child: current);
margin :widget和widget之间
current = Padding(padding: margin, child: current);

decoration

decoration: 背景装饰 类似android中的shape 边框 圆角,背景色,背景图片等

current = DecoratedBox(decoration: decoration, child: current);
 const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
  }) : assert(shape != null),
       assert(
         backgroundBlendMode == null || color != null || gradient != null,
         'backgroundBlendMode applies to BoxDecoration\'s background color or '
         'gradient, but no color or gradient was provided.'
       );


color:背景色,最后也会设置到decoration这个widget上面 所以不可同时设置color和decoration

//断言不能同时存在
assert(color == null || decoration == null)
//用color生成BoxDecoration
decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null),

foregroundDecoration 前景色 DecoratedBox 底部颜色即背景色,中间内容,顶部颜色即前景色 会遮挡中间内容


current = DecoratedBox(  decoration: foregroundDecoration,  position: DecorationPosition.foreground,  child: current,);


width height 最后要作用到BoxConstraints,由BoxConstraints限制范围


 constraints =
        (width != null || height != null)
          ? constraints?.tighten(width: width, height: height)
            ?? BoxConstraints.tightFor(width: width, height: height)
          : constraints,


dart 语法学习

三元表达式 ?:

??

相关文章
|
Android开发 iOS开发 MacOS
APP备案公钥、证书MD5指纹/签名MD5值获取最简单方法
APP备案公钥、证书MD5指纹/签名MD5值获取方法,Android安卓平台、Windows平台、macOS平台,三个平台获取方法, Android平台使用 APP备案助手,各大安卓应用市场搜索 APP备案助手 即可,Windows/macOS平台使用jadx-gui工具。
10226 3
|
小程序
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
2769 0
|
存储 JSON 前端开发
SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装
SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装的实现
1569 0
SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装
|
IDE Java 开发工具
解决IntelliJ IDEA报错Error:Cannot determine path to ‘tools.jar‘ library for 17 (D:/JAVA)
解决IntelliJ IDEA报错Error:Cannot determine path to ‘tools.jar‘ library for 17 (D:/JAVA)
1677 0
|
Java 开发工具 Android开发
解决flutter doctor出现Android license status unknown或cmdline-tools component is missing
解决flutter doctor出现Android license status unknown或cmdline-tools component is missing
785 4
解决flutter doctor出现Android license status unknown或cmdline-tools component is missing
|
XML 安全 Android开发
Flutter配置Android和IOS允许http访问
Flutter配置Android和IOS允许http访问
843 3
|
Java 开发工具
开发工具系类 之 Cannot determine path to ‘tools.jar‘ library for 17 (D:/Program Files/Java/jdk-17.0.9)
这篇文章讲述了作者在升级JDK至17版本后遇到IDEA无法识别`tools.jar`的问题,并提供了两种解决方法:升级IDEA版本或降低JDK版本,并提供了相关版本的IDEA兼容性信息。
开发工具系类 之 Cannot determine path to ‘tools.jar‘ library for 17 (D:/Program Files/Java/jdk-17.0.9)
|
JavaScript 前端开发 API
Vue3之script-setup 语法糖
本文介绍了Vue 3的`<script setup>`语法糖,通过示例代码演示了如何在组件中使用`<script setup>`以及相关的Vue 3 Composition API函数和特性,如响应式引用、生命周期钩子、CSS模块等,并展示了组件间的通信和样式应用。
599 0
Vue3之script-setup 语法糖
|
开发者
flutter:功能性组件 (八)
本文介绍了Flutter中常用的UI组件和功能,包括进度指示器(线性和圆形)、下拉刷新、选项按钮(单选按钮、复选框、开关)、手势识别(GestureDetector、Ink和InkWell)以及提示和Offstage组件的使用方法和示例代码。这些组件和功能可以帮助开发者快速构建交互丰富的应用程序界面。
304 0

热门文章

最新文章