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 语法学习

三元表达式 ?:

??

相关文章
|
5月前
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
51 0
flutter系列之:flutter中常用的Stack layout详解
对于现代APP的应用来说,为了更加美观,通常会需要用到不同图像的堆叠效果,比如在一个APP用户背景头像上面添加一个按钮,表示可以修改用户信息等。 要实现这样的效果,我们需要在一个Image上面堆叠其他的widget对象,flutter为我们提供了这样的一个非常方便的layout组件叫做Stack,今天和大家一起来聊一聊Stack的使用。
flutter系列之:flutter中常用的Stack layout详解
flutter系列之:Material中的3D组件Card
除了通用的组件之外,flutter还提供了两种风格的特殊组件,其中在Material风格中,有一个Card组件,可以很方便的绘制出卡片风格的界面,并且还带有圆角和阴影,非常的好用,我们一起来看看吧。
flutter系列之:Material中的3D组件Card
flutter系列之:flutter中常用的container layout详解
在上一篇文章中,我们列举了flutter中的所有layout类,并且详细介绍了两个非常常用的layout:Row和Column。 掌握了上面两个基本的layout还是不够的,如果需要应付日常的layout使用,我们还需要掌握多一些layout组件。今天我们会介绍一个功能强大的layout:Container layout。
flutter系列之:flutter中常用的container layout详解
了解Flutter中的Container组件
在开发过程中,可以看到万物皆Widget,后续有时间将详细读源码。
|
Android开发 iOS开发
Flutter(三)之Flutter的基础Widget(上)
这个章节本来打算讲解Flutter的渲染原理,但是学习初期过多的讲解原理性的内容,并不利于大家快速入门和上手,做出一些带效果的内容; 所以,我打算换一种思路,先讲解一些组件的用法,让大家习惯Flutter的开发过程和模式,再回头去巩固原理性的知识; 另外,在讲解这些Widget的时候,我并不打算将所有的属性一一列出,因为没有意义,也记不住; 我后面打算有一个专题是关于Flutter布局的,会选出一些好看的布局界面带着大家一起来完成:美团页面、京东页面、B站页面等等,某些我目前没有讲到的属性,后面应用的会再进行讲解;
176 0
Flutter(三)之Flutter的基础Widget(上)
|
前端开发 数据安全/隐私保护 容器
Flutter(三)之Flutter的基础Widget(下)
这个章节本来打算讲解Flutter的渲染原理,但是学习初期过多的讲解原理性的内容,并不利于大家快速入门和上手,做出一些带效果的内容; 所以,我打算换一种思路,先讲解一些组件的用法,让大家习惯Flutter的开发过程和模式,再回头去巩固原理性的知识; 另外,在讲解这些Widget的时候,我并不打算将所有的属性一一列出,因为没有意义,也记不住; 我后面打算有一个专题是关于Flutter布局的,会选出一些好看的布局界面带着大家一起来完成:美团页面、京东页面、B站页面等等,某些我目前没有讲到的属性,后面应用的会再进行讲解;
130 0
Flutter(三)之Flutter的基础Widget(下)
Flutter Card使用
Flutter Card使用
280 0
Flutter Card使用
|
前端开发 容器
Flutter基础:Flutter中的div——Container(下)
将Container比做成Flutter中的div并不恰当,但这并不妨碍前端同学用Container做为起点来学习Flutter。Flutter官方的文档阅读起来不是很直观,对于习惯了看前端类有直观示例的文档的同学来说不是很友好,故简单的总结了一下,从Container的基础用法开始。