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&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
5月前
|
UED 开发者
flutter:view (九)
本文介绍了Flutter中多种滚动组件的使用方法,包括`SliverAppBar`、`PageView`、`NestedScrollView`、`ListView`、`GridView`、`SingleChildScrollView`等。具体展示了如何构建可滑动的页面布局,如实现下拉刷新、无限循环的轮播图、带标题栏的嵌套滑动视图、列表视图的不同形式(如水平列表、带有分隔线的列表)以及自定义的滚动视图。还提供了监听滚动距离、滑动到指定位置等高级功能的实现代码示例。这些组件和技巧对于开发具有丰富交互效果的移动应用非常有用。
|
5月前
|
开发者 UED
flutter:demo (七)
在移动应用开发中,用户界面的布局设计是提升用户体验的关键要素。Flutter作为一个强大的UI框架,提供了多种布局组件,使开发者能够灵活地构建复杂的用户界面模块。无论是线性布局(如Column和Row)还是非线性布局(如Stack和Wrap),Flutter的布局系统都允许开发者以简洁的方式组织和组合界面元素。
|
10月前
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
70 0
|
10月前
|
开发者
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/BoxScrollView
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/BoxScrollView
89 0
|
10月前
|
索引
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
61 0
flutter系列之:flutter中常用的Stack layout详解
对于现代APP的应用来说,为了更加美观,通常会需要用到不同图像的堆叠效果,比如在一个APP用户背景头像上面添加一个按钮,表示可以修改用户信息等。 要实现这样的效果,我们需要在一个Image上面堆叠其他的widget对象,flutter为我们提供了这样的一个非常方便的layout组件叫做Stack,今天和大家一起来聊一聊Stack的使用。
flutter系列之:flutter中常用的Stack layout详解
flutter系列之:flutter中常用的container layout详解
在上一篇文章中,我们列举了flutter中的所有layout类,并且详细介绍了两个非常常用的layout:Row和Column。 掌握了上面两个基本的layout还是不够的,如果需要应付日常的layout使用,我们还需要掌握多一些layout组件。今天我们会介绍一个功能强大的layout:Container layout。
flutter系列之:flutter中常用的container layout详解
了解Flutter中的Container组件
在开发过程中,可以看到万物皆Widget,后续有时间将详细读源码。