简介

显示一个子项列表的单个子项。

• 只显示指定位置的widget，其他的位置的widget不会显示，所以indexedStack的尺寸永远和最大的子节点一样。
• 显示的子项widget是给到了具体的索引选择出来的widget
• 如果value 为null，将不显示任何内容

基本用法

index → int

• 控制显示child的索引
• ex:可以通过多个图片转化表示状态（正确，错误，警告等）。

实例演示

class StackDefault extends StatelessWidget {
  final int currIndex;

  const StackDefault(thi...

阅读全文...

简介

用于将多个childs相对于其框的边缘定位，多用于以简单方式重叠children

• 当第一个child置于底部时，堆栈按顺序绘制其子项。如果更改子项绘制顺序，可以使用新顺序重新建立堆栈
• 注意：stack的每一个子节点都已定位或未定位，定位子项必须至少一个非null属性的定位。

基本用法

1.alignment → AlignmentGeometry

• 对齐方式，默认是右上角,详情请点击Layout-row页面，类似
• 多个positioned叠加图层，Alignment.center事例

fit → StackFit

• loose:放开了子节点宽高的约束，可以让子节点从0到最大尺...

阅读全文...

简介

SliverPadding 属于 Flutter Slivers大家族中的一个

• SliverPadding 是 Slivers 大家族中的一类padding
• 可以配合各种 Sliver成员使用

基本用法

这里我们结合Slivers家族中的 SliverList 来演示使用

• Flutter 中的Slivers大家族基本都是配合CustomScrollView来实现一些自定义滚动效果
• padding作用于每一个item
• 对于有些特殊的sliver可能会有副作用，比如对于 pinned:true 的 SliverPersisitentHeader 设置可能会导致 APPBar与之前...

阅读全文...

简介

属于Flutter动画成员的一部分

基本用法

动画版本的Padding

• 在给定的时间内，自动完成转换缩进到给定的padding值
• 通过设置curve 来指定动画的运行速率动画

实例演示

import 'package:flutter/material.dart';

class AnimatedPaddingDemo extends StatefulWidget {
  _AnimatedPaddingDemoState createState() => _AnimatedPaddingDemoState();
}

class _AnimatedPadd...

阅读全文...

简介

widget 内边距

• 类似于前端中的 div+css:padding 效果
• Container + padding = Padding

基本用法

Padding widget 的padding必须设置，不能为null

• 通过给定的padding值来隔开子组件
• 通过EdgeInsets 类来计算 padding的大小

实例演示

class PaddingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      colo...

阅读全文...

简介

一个常用的widget，它结合了常见的绘画，定位和大小调整

• 该容器首先让child填充绘制，然后再将其他的约束应用于填充范围。
• 在绘画过程中，容器先应用给定的转换，再绘制装饰以填充的范围，然后绘制child，最后绘制前景，同时填充需要填充的范围
• 没有child的容器将尽可能的大，除非传入的约束是无限制的。child的大小会被width，height等约束覆盖。

基本用法

Container 可以结合多种其他widget，每个widget都有自己的布局行为，因此Container的布局行为有点复杂。

• 简单说，就是如果窗口小部件没有子窗口，没有height，没有width，没有约...

阅读全文...

简介

Row 是一个将其child显示在水平数组的widget

• 将其child填充可用的横向水平空间，一行高度是childs的最大高度（即：总是满足传入的垂直约束）
• 如果你只有一个child，只需要考虑使用对其或者中间位置，如果多个child，注意扩展水平空间(Expanded)，可以将child封装在一个扩展部件里面
• 当我们看到行有黄色和黑色条纹警告时候，说明行已经溢出，当行溢出，行之间空间将没有任何空间可供扩展。

基本用法

水平布局，设置位置对齐方式

mainAxisSize 属性

• 一行的高度是有mainAxisSize属性控制，默认是max

mainAxisAlignmen...

阅读全文...

简介

Column 是一个将其child显示在竖直方向数组的widget，于Row相对

• 将其child填充可用的竖直水平空间，默认竖直空间无法滚动，如有很多children，竖直空间饱和无法放置，你可以使用listView搭配使用
• 如果你只有一个child，只需要使用对齐（Align）或者居中（Center）来展示child

基本用法

竖直布局，设置位置对齐方式

mainAxisSize 属性

• 一行的高度是有mainAxisSize属性控制，默认是max

mainAxisAlignment属性

• 将children放置在主轴某位置

CrossAxisAlignment 属性

...

阅读全文...

简介

一个用于撑开 flex 布局子组件空间的widget

• 用于在Row、Column、Flex子组件内
• 会沾满所有可用空间

基本用法

以下示例对比使用 Expanded

• 使用Expanded 可以使 Row、Column或者Flex的子项能够填充主轴的全部可用空间
• 如果存在多个子项，则根据 flex 属性来划分可用空间
• Expanded widget 必须是Row,Column或者Flex的后代

实例演示

import 'package:flutter/material.dart';

class ExpandedDemo extends StatelessWi...

阅读全文...

简介

一个将child 放置于中心

• 如果它的尺寸受到外界约束，并且widthFactor和heightFactor 为null，则widget将会尽可能的大。
• 如果它的尺寸不受外界约束，并且相应的大小为null，则widget将会匹配child widget的大小
• 如果相应尺寸不为null，则widget的相应尺寸将是child 尺寸和尺寸因子的乘积（例如：widthFactor是2.0,那么widget的宽度始终是其child widget宽度的2倍）

基本用法

widthFacto/heightFactor 非null，将其宽/高度设置为子宽/高度乘以此系数

• 如果widthFa...

阅读全文...