flutter的布局控件

Align

Align是Flutter中的一个布局控件，用于控制子控件在父容器中的位置对齐方式。

Center

是Alignr的一个子类 用于将子组件居中显示

Align控件有以下常用属性：

- `alignment`：用于设置子控件在父容器中的对齐方式，可以使用Alignment类来指定对齐方式，如`Alignment.topLeft`、`Alignment.center`等。
- `widthFactor`和`heightFactor`：用于设置子控件的宽度和高度相对于父容器的比例因子

（也就是Align是子控件的多少倍，让他来定Align的大小）。
- `child`：用于设置Align控件的子控件。

以下是一个使用Align的示例：

Align(
  alignment: Alignment.center,//相当于Alignment(0.0, 0.0);
  widthFactor: 2.0,
  heightFactor: 2.0,
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.blue,
  ),
)

在上面的示例中，Align控件的alignment属性设置为Alignment.center，使子控件在父容器中居中对齐。通过设置widthFactor和heightFactor属性为2.0，子控件的宽度和高度相对于父容器的宽度和高度都为2倍。子控件是一个蓝色的正方形容器。

通过使用Align控件，您可以轻松地控制子控件在父容器中的位置和尺寸，并实现各种对齐效果。

Padding

Padding是Flutter中的一个布局组件，用于给子组件添加内边距。它可以在子组件周围添加空白区域，以调整子组件与其他组件之间的间距。您可以使用以下代码来使用Padding组件：

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text(
    'Hello, World!',
     style: TextStyle(fontSize: 24,backgroundColor: Colors.red),
  ),
)

在上面的示例中，我们将一个Text组件包装在Padding组件中，并设置了16.0的内边距。这将在文本周围添加16个逻辑像素的空白区域。您可以根据需要调整padding值，也可以使用EdgeInsets的其他属性来设置不同的内边距。

 Padding(
          padding: EdgeInsets.only(left: 16.0),//单独一个方向加边距
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24),
          ),
        )

在上面的示例中，我们使用 EdgeInsets.only() 构造函数并指定了 left 属性为16.0，这将在文本的左侧添加16个逻辑像素的边距。您可以根据需要使用 top 、 right 、 bottom 等属性来添加其他方向的边距。

Container

Container是Flutter中的一个布局组件，用于创建一个可自定义样式的矩形容器。它可以包含其他组件，并提供了一些属性来设置背景颜色、边距、边框等。

这是Container的构造函数，它接受多个可选参数来配置Container控件的属性。下面是各个参数的说明：

- `super.key`：Widget的唯一标识符，用于在Widget树中唯一标识一个Widget。
- `alignment`：子控件在容器中的对齐方式。
- `padding`：容器的内边距。
- `color`：容器的背景颜色。
- `decoration`：容器的装饰效果，可以设置边框、背景图片等。
- `foregroundDecoration`：容器的前景装饰效果。
- `width`：容器的宽度。
- `height`：容器的高度。
- `constraints`：容器的大小约束。
- `margin`：容器的外边距。
- `transform`：对容器进行变换，如旋转、缩放等。
- `transformAlignment`：变换的原点位置。
- `child`：容器的子控件。
- `clipBehavior`：裁剪行为，用于控制子控件是否裁剪。

这些参数可以根据需要进行配置，用于创建自定义样式和布局的容器。

Container的大小可以通过以下几种方式进行设置：

1. 设置固定的宽度和高度：
 

Container(
  width: 200.0,
  height: 100.0,
  // 其他属性...
)

上面的代码将容器的宽度设置为200.0，高度设置为100.0。

2. 使用`constraints`属性设置最小和最大宽度和高度：
 

Container(
  constraints: BoxConstraints(
    minWidth: 100.0,
    maxWidth: 200.0,
    minHeight: 50.0,
    maxHeight: 100.0,
  ),
  // 其他属性...
)

上面的代码将容器的最小宽度设置为100.0，最大宽度设置为200.0，最小高度设置为50.0，最大高度设置为100.0。容器的实际宽度和高度将在这个范围内自适应。

3. 使用`alignment`属性和子控件的大小来确定容器的大小：
 

Container(
  alignment: Alignment.center,
  child: Text('Hello World'),
  // 其他属性...
)

上面的代码将容器的对齐方式设置为居中，并将一个文本控件作为子控件放置在容器中。容器的大小将根据子控件的大小来确定。

这些方法可以根据需要进行组合使用，以实现各种不同的容器大小。

transform`是`Container`的一个属性，用于对容器进行变换操作，例如平移、缩放、旋转等。

`transform`属性的类型是`Matrix4`，它可以通过`Matrix4`类的方法来创建不同的变换矩阵，然后将变换矩阵赋值给`transform`属性。

Container(
  width: 200.0,
  height: 200.0,
  color: Colors.blue,
  transform: Matrix4.rotationZ(0.5),
  child: Text('Hello World'),
)

`

上面的代码创建了一个蓝色的容器，并将一个文本控件作为子控件放置在容器中。通过`transform`属性，我们将容器进行了旋转变换，使其绕Z轴旋转了0.5弧度。

除了`Matrix4.rotationZ`方法，`Matrix4`类还提供了其他常用的变换方法，例如：

- `Matrix4.translationValues(dx, dy, dz)`：平移变换，将容器在水平方向上平移dx个单位，在垂直方向上平移dy个单位，在深度方向上平移dz个单位。
- `Matrix4.scale(sx, sy, sz)`：缩放变换，将容器在水平方向上缩放sx倍，在垂直方向上缩放sy倍，在深度方向上缩放sz倍。
- `Matrix4.rotationX(angle)`：绕X轴旋转变换，将容器绕X轴旋转angle弧度。
- `Matrix4.rotationY(angle)`：绕Y轴旋转变换，将容器绕Y轴旋转angle弧度。

通过组合使用这些变换方法，可以实现各种不同的变换效果。

`clipBehavior`是`Container`的一个属性，用于控制子控件在容器内部的裁剪行为。它的类型是`Clip`枚举。

`Clip`枚举有以下几个值：

- `Clip.none`：子控件不进行裁剪，可以超出容器的边界。
- `Clip.hardEdge`：子控件在容器的边界内进行裁剪，超出部分会被裁剪掉。
- `Clip.antiAlias`：与`Clip.hardEdge`相同，但是会使用抗锯齿来平滑裁剪的边缘。
- `Clip.antiAliasWithSaveLayer`：与`Clip.antiAlias`相同，但是在裁剪之前会创建一个保存图层，可以提高性能。

以下是使用`clipBehavior`属性的示例：

Container(
  width: 200.0,
  height: 200.0,
  color: Colors.blue,
  clipBehavior: Clip.hardEdge,
  child: Image.asset('assets/image.png'),
)

上面的代码创建了一个蓝色的容器，并将一个图片作为子控件放置在容器中。由于`clipBehavior`设置为`Clip.hardEdge`，子控件会在容器的边界内进行裁剪，超出部分会被裁剪掉。

`decoration`是`Container`的一个属性，用于设置容器的装饰效果，例如背景颜色、边框、阴影等。注意在使用是会与color属性冲突

`decoration`属性的类型是`BoxDecoration`，它可以通过`BoxDecoration`类的构造函数来创建不同的装饰效果，然后将`BoxDecoration`对象赋值给`decoration`属性。

以下是使用`decoration`属性的示例：

Container(
  width: 200.0,
  height: 200.0,
  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(
      color: Colors.red,
      width: 2.0,
    ),
    borderRadius: BorderRadius.circular(10.0),
    boxShadow: [
      BoxShadow(
        color: Colors.black,
        offset: Offset(2.0, 2.0),
        blurRadius: 5.0,
      ),
    ],
  ),
  child: Text('Hello World'),
)

 

上面的代码创建了一个200x200大小的容器，并将一个文本控件作为子控件放置在容器中。通过`decoration`属性，我们设置了容器的装饰效果，包括蓝色的背景颜色、红色的边框、圆角边框半径为10.0、以及黑色的阴影效果。

`BoxDecoration`类提供了很多方法来设置不同的装饰效果，例如：

- `color`：设置容器的背景颜色。
- `border`：设置容器的边框样式，可以指定边框的颜色、宽度等。
- `borderRadius`：设置容器的圆角边框半径。
- `boxShadow`：设置容器的阴影效果，可以指定阴影的颜色、偏移量、模糊半径等。

通过组合使用这些方法，可以实现各种不同的装饰效果。

BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
  })

`BoxDecoration`类的构造函数有以下几个参数：

- `color`：设置容器的背景颜色。
- `image`：设置容器的背景图片。
- `border`：设置容器的边框样式，可以指定边框的颜色、宽度等。
- `borderRadius`：设置容器的圆角边框半径。
- `boxShadow`：设置容器的阴影效果，可以指定阴影的颜色、偏移量、模糊半径等。
- `gradient`：设置容器的渐变背景，可以指定渐变的颜色、起始点、结束点等。
- `backgroundBlendMode`：设置背景混合模式，用于控制背景颜色和背景图片的混合效果。
- `shape`：设置容器的形状，可以是矩形或圆形。

使用`BoxDecoration`类的构造函数，可以创建出各种不同的装饰效果。例如：

Container(
  width: 200.0,
  height: 200.0,
  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(
      color: Colors.red,
      width: 2.0,
    ),
    borderRadius: BorderRadius.circular(10.0),
    boxShadow: [
      BoxShadow(
        color: Colors.black,
        offset: Offset(2.0, 2.0),
        blurRadius: 5.0,
      ),
    ],
    gradient: LinearGradient(
      colors: [Colors.red, Colors.blue],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    backgroundBlendMode: BlendMode.overlay,
    shape: BoxShape.circle,
  ),
  child: Text('Hello World'),
)

 

上面的代码创建了一个200x200大小的圆形容器，并将一个文本控件作为子控件放置在容器中。通过`decoration`属性和`BoxDecoration`类的构造函数，我们设置了容器的装饰效果，包括蓝色的背景颜色、红色的边框、圆角边框半径为10.0、黑色的阴影效果、红蓝渐变背景、以及背景混合模式为叠加效果。

通过组合使用`BoxDecoration`类的不同参数，可以实现各种不同的装饰效果。

Flex是一种用于控制布局的组件

Flex是Flutter中的一个布局组件，可以用于水平或垂直方向的布局。使用Flex布局时，需要指定主轴方向和交叉轴方向，以及flex属性来控制子元素的大小和排列方式。例如，可以使用flex属性来使子元素在主轴方向上均匀分布，或者在交叉轴方向上平均分配空间。

Row和Column都是Flex的子类，由direction来决定

Row

Row是一个用于水平排列子组件的布局控件。它是Flutter的一个内置控件，常用于创建水平方向的布局。
 使用Row时，您可以将多个子组件放置在同一行上，并且它们会自动水平排列。您可以使用Row的属性来控制子组件的对齐方式、间距和大小。
 

const Row({
    super.key,
    super.mainAxisAlignment,
    super.mainAxisSize,
    super.crossAxisAlignment,
    super.textDirection,
    super.verticalDirection,
    super.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    super.children,
  }) : super(
    direction: Axis.horizontal,
  );
}

`Row`类是用于在水平方向上排列子控件的布局控件。它的构造函数有以下几个参数：

- `key`：控件的唯一标识符。
- `mainAxisAlignment`：子控件在主轴方向上的对齐方式，默认为`MainAxisAlignment.start`。

`MainAxisAlignment`是一个枚举类型，用于指定子控件在主轴方向上的对齐方式。在`Row`或`Column`等布局控件中，主轴方向是指控件的排列方向，可以是水平方向或垂直方向。

`MainAxisAlignment`枚举类型定义了以下几个常量：

- `start`：将子控件靠近主轴的起始位置对齐。
- `end`：将子控件靠近主轴的结束位置对齐。
- `center`：将子控件在主轴方向上居中对齐。
- `spaceBetween`：将子控件均匀地分布在主轴上，子控件之间的间距相等，首尾子控件与父控件的边界没有间距。
- `spaceAround`：将子控件均匀地分布在主轴上，子控件之间的间距相等，首尾子控件与父控件的边界有间距。

`spaceAround`是`MainAxisAlignment`枚举类型的一个常量，表示将子控件均匀地分布在主轴上，子控件之间的间距相等，首尾子控件与父控件的边界有间距。

当`MainAxisAlignment`的值为`spaceAround`时，子控件之间的间距是相等的，并且首尾子控件与父控件的边界也有间距。这意味着在主轴方向上，子控件与父控件的边界之间的间距是子控件之间间距的一半。

使用`spaceAround`可以在布局中实现一种平均分布的效果，让子控件在主轴方向上均匀地分布，并且有一定的间距。这种对齐方式常用于创建多个按钮或图标之间的间距相等的布局。

- `spaceEvenly`：将子控件均匀地分布在主轴上，子控件之间的间距相等，包括首尾子控件与父控件的边界。

通过设置`mainAxisAlignment`属性，可以控制子控件在主轴方向上的对齐方式，从而实现不同的布局效果。例如，设置`mainAxisAlignment`为`MainAxisAlignment.center`，可以将子控件在主轴方向上居中对齐。

- `mainAxisSize`：在主轴方向上的尺寸约束，默认为`MainAxisSize.max`。
- `crossAxisAlignment`：子控件在交叉轴方向上的对齐方式，默认`CrossAxisAlignment.center`。

`CrossAxisAlignment`是一个枚举类型，用于指定子控件在交叉轴方向上的对齐方式。在`Row`或`Column`等布局控件中，交叉轴方向是指与主轴方向垂直的方向。

`CrossAxisAlignment`枚举类型定义了以下几个常量：

- `start`：将子控件靠近交叉轴的起始位置对齐。
- `end`：将子控件靠近交叉轴的结束位置对齐。
- `center`：将子控件在交叉轴方向上居中对齐。
- `stretch`：将子控件沿交叉轴方向拉伸，使其填充交叉轴的可用空间。
- `baseline`：将子控件的基线与交叉轴的基线对齐，如果子控件没有基线，则默认与子控件的顶部对齐。要配合`textBaseline

`baseline`是`CrossAxisAlignment`枚举类型的一个常量，用于将子控件的基线与交叉轴的基线对齐。

在`Row`或`Column`等布局控件中，子控件可能具有不同的高度。当需要将具有文字内容的子控件对齐时，可以使用`baseline`对齐方式。

使用`baseline`对齐方式时，子控件的基线将与交叉轴的基线对齐。如果子控件没有基线，则默认与子控件的顶部对齐。这样可以确保具有文字内容的子控件在垂直方向上对齐，使得文字看起来更加整齐。

需要注意的是，使用`baseline`对齐方式时，子控件的高度可能会影响整体布局。如果子控件的高度不同，可能会导致其他子控件的位置发生偏移。因此，在使用`baseline`对齐方式时，需要确保子控件的高度是一致的，或者通过其他方式进行调整，以保持整体布局的一致性。

通过设置`crossAxisAlignment`属性，可以控制子控件在交叉轴方向上的对齐方式，从而实现不同的布局效果。例如，设置`crossAxisAlignment`为`CrossAxisAlignment.center`，可以将子控件在交叉轴方向上居中对齐。

- `textDirection`：子控件的文本方向，默认为`null`。
- `verticalDirection`：子控件的垂直方向，默认为`VerticalDirection.down`。
- `textBaseline`：子控件的基线对齐方式，默认为`null`。

`textBaseline`是`TextBaseline`枚举类型的一个常量，用于指定文字基线的对齐方式。

在Flutter中，文字基线是指文字的底部边缘，用于对齐文字的位置。`textBaseline`枚举类型定义了以下几个常量：

- `alphabetic`：文字基线与字母的基线对齐。
- `ideographic`：文字基线与汉字的基线对齐。flutter只有这两种
- `hanging`：文字基线与悬挂标点的基线对齐。
- `ideographicBaseline`：文字基线与汉字的基线对齐，如果文字中没有汉字，则默认与文字的底部对齐。
- `alphabeticBaseline`：文字基线与字母的基线对齐，如果文字中没有字母，则默认与文字的底部对齐。

通过设置`textBaseline`属性，可以控制文字基线的对齐方式，从而实现不同的布局效果。例如，设置`textBaseline`为`TextBaseline.alphabetic`，可以将文字基线与字母的基线对齐，从而实现字母对齐的效果。

需要注意的是，不同的`textBaseline`对齐方式可能会对文字的位置产生影响，因此在使用`textBaseline`时，需要根据实际情况进行调整，以保证文字的对齐效果。

- `children`：子控件的列表。

上面的构造函数中，通过调用`super`关键字，将父类`Row`的构造函数的参数传递给父类，然后再添加额外的参数。在这个构造函数中，将`direction`参数设置为`Axis.horizontal`，表示排列方向为水平方向。

Flexible

（灵活的）是一个用于灵活布局的小部件。它通常与Row、Column或Flex等容器小部件一起使用，用于控制子部件在可用空间内的伸缩行为。

Flexible小部件具有flex属性，可以用来指定子部件在可用空间内所占的比例。flex属性是一个整数值，用于确定子部件在伸缩过程中所占的比例。比如，如果一个容器中有两个子部件，一个flex属性值为1，另一个为2，那么第二个子部件将会占据可用空间的两倍。

下面是一个使用Flexible的示例：

Row(
  children: <Widget>[
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
  ],
)

在这个示例中，我们创建了一个Row小部件，并在其中放置了两个子部件。第一个子部件使用Flexible包裹，并且指定了flex属性值为1，第二个子部件使用Flexible包裹，并且指定了flex属性值为2。这意味着第二个子部件将会占据可用空间的两倍。

通过使用Flexible，我们可以根据需要调整子部件在布局中所占的比例，从而实现更加灵活的布局效果。

Row(
  children: <Widget>[
    Flexible(
      fit: FlexFit.tight,//尽可能的拉伸，以使用可用空间
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    Flexible(
      fit: FlexFit.loose,//根据子部件的大小自由调整大小，而不会强制拉伸子部件
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
    Flexible(
      fit: FlexFit.passthrough,
      child: Container(
        color: Colors.green,
        height: 100,
      ),
    ),
  ],
)

Expanded

是Flexible的子类

class Expanded extends Flexible {
  /// 创建一个小部件，用于扩展 [Row]、[Column] 或 [Flex] 中的子部件，
  /// 使子部件填充可用空间沿着伸缩小部件的主轴。
  const Expanded({
    Key? key,
    int flex = 1,
    required Widget child,        //默认让它拉伸,开发中多数用Expanded
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

Stack

是一个在Flutter中常用的小部件，用于在布局中叠加多个子部件。

 `Stack`  将子部件堆叠在一起，类似于在现实生活中将多张纸叠放在一起。它可以用于创建复杂的布局，其中子部件可以重叠、定位或覆盖其他子部件。

const Stack({
  Key? key,
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.clipBehavior = Clip.hardEdge,
  List<Widget> children = const <Widget>[],
})

- key ：用于标识小部件的可选键。

- alignment ：指定子部件在 Stack 中的对齐方式，默认为 AlignmentDirectional.topStart ，即左上角对齐。

- textDirection ：指定子部件的文本方向，默认为 null 。

- fit ：指定子部件在 Stack 中的适应方式，默认为 StackFit.loose ，即子部件可以根据自身大小调整。

- clipBehavior ：指定子部件的剪裁行为，默认为 Clip.hardEdge ，即硬边缘剪裁。

- children ：要叠加的子部件列表。

以下是一个示例：

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

在这个示例中，我们创建了一个  `Stack`  小部件，并在其中放置了两个子部件。第一个子部件是一个红色的正方形容器，它占据整个  `Stack`  的空间。第二个子部件使用  `Positioned`  小部件进行定位，它被放置在距离顶部50像素、左侧50像素的位置，是一个蓝色的正方形容器。

通过使用  `Stack`  和  `Positioned` ，我们可以灵活地控制子部件在布局中的位置和叠放顺序，以实现各种复杂的布局效果。

`Positioned`  是一个用于在  `Stack`  中定位子部件的小部件。

通过  `Positioned` ，我们可以精确地指定子部件在  `Stack`  中的位置，并可以设置子部件的宽度和高度。

以下是  `Positioned`  的构造函数：

Positioned({
  Key? key,
  double? left,
  double? top,
  double? right,
  double? bottom,
  double? width,
  double? height,
  required Widget child,
})

在这个构造函数中，参数的含义如下：

-  `key` ：用于标识小部件的可选键。
-  `left` ：指定子部件距离左边的偏移量。
-  `top` ：指定子部件距离顶部的偏移量。
-  `right` ：指定子部件距离右边的偏移量。
-  `bottom` ：指定子部件距离底部的偏移量。
-  `width` ：指定子部件的宽度。
-  `height` ：指定子部件的高度。
-  `child` ：要定位的子部件。

通过使用  `Positioned` ，我们可以在  `Stack`  中的指定位置放置子部件，并可以设置子部件的尺寸。通过调整  `left` 、 `top` 、 `right`  和  `bottom`  参数的值，我们可以精确地控制子部件在  `Stack`  中的位置。

ListView

Flutter中的ListView是一个用于显示垂直或水平列表的常用UI控件。它可以在屏幕上以垂直或水平方向排列一系列项目，并且可以根据需要进行滚动。

ListView是通过ListView类来实现的。它提供了多种构建列表的方式，包括使用固定高度的列表项、动态高度的列表项以及通过构建器函数来构建列表项。

以下是使用ListView的一些常见用法：

ListTile

ListTile 是一个Dart编程语言中的小部件，用于在列表中显示一个可点击的平铺项。以下是 ListTile 构造函数中各个参数的解释： 
 
-  super.key : 继承自父类的参数，用于标识小部件的唯一性。 
-  leading : 在 ListTile 的前面显示的小部件，通常是一个图标。 
-  title : 显示在 ListTile 中的主要文本内容。 
-  subtitle : 显示在 ListTile 中的次要文本内容。 
-  trailing : 在 ListTile 的后面显示的小部件，通常是一个图标。 
-  isThreeLine : 一个布尔值，用于指定是否显示三行文本。 
-  dense : 一个布尔值，用于指定是否使用较小的间距。 
-  visualDensity : 用于指定小部件的视觉密度。 
-  shape : 用于指定小部件的形状。 
-  style : 用于指定文本样式。 
-  selectedColor : 用于指定选中时的背景颜色。 
-  iconColor : 用于指定图标的颜色。 
-  textColor : 用于指定文本的颜色。 
-  titleTextStyle : 用于指定标题文本的样式。 
-  subtitleTextStyle : 用于指定副标题文本的样式。 
-  leadingAndTrailingTextStyle : 用于指定前导和尾部文本的样式。 
-  contentPadding : 用于指定内容的内边距。 
-  enabled : 一个布尔值，用于指定小部件是否可用。 
-  onTap : 当小部件被点击时触发的回调函数。 
-  onLongPress : 当小部件被长按时触发的回调函数。 
-  onFocusChange : 当小部件的焦点状态发生变化时触发的回调函数。 
-  mouseCursor : 鼠标悬停在小部件上时显示的光标样式。 
-  selected : 一个布尔值，用于指定小部件是否被选中。 
-  focusColor : 用于指定焦点时的背景颜色。 
-  hoverColor : 用于指定鼠标悬停时的背景颜色。 
-  splashColor : 用于指定点击时的背景颜色。 
-  focusNode : 用于指定小部件的焦点节点。 
-  autofocus : 一个布尔值，用于指定小部件是否自动获取焦点。 
-  tileColor : 用于指定平铺项的背景颜色。 
-  selectedTileColor : 用于指定选中平铺项的背景颜色。 
-  enableFeedback : 一个布尔值，用于指定是否启用触觉反馈。 
-  horizontalTitleGap : 用于指定标题与前导和尾部之间的水平间距。 
-  minVerticalPadding : 用于指定垂直方向的最小内边距。 
-  minLeadingWidth : 用于指定前导的最小宽度。 
-  titleAlignment : 用于指定标题的对齐方式。 
 
请注意， isThreeLine 参数要求在使用时，副标题 subtitle 必须非空。

1. 使用固定高度的列表项：

          （建议条目较少时使用）

ListView(
  children: <Widget>[
    ListTile(
      title: Text('Item 1'),
    ),
    ListTile(
      title: Text('Item 2'),
    ),
    ListTile(
      title: Text('Item 3'),
    ),
    // 添加更多的列表项...
  ],
)

1.1，List.generate 是Dart编程语言中的一个函数，用于生成一个列表

       它接受两个参数：列表的长度和一个回调函数。回调函数会根据索引值生成列表中的每个元素。在这个例子中，列表的长度是100，回调函数通过 (index) 表达式来生成每个元素。

 ListView(
        children: List.generate(100, (index) {
          return ListTile(
            leading:Icon(Icons.people) ,
            title: Text("联系人："),
            subtitle: Text("联系人电话：156563221482"),
            trailing: Icon(Icons.delete),
          );
        }),
      )

使用Dart编程语言创建一个ListView小部件，其中包含100个ListTile小部件。ListTile小部件用于显示联系人信息，每个ListTile都包含一个图标、一个标题和一个副标题，以及一个尾部图标。在这个例子中，图标是一个表示人物的Icons.people图标，标题是固定的"联系人："，副标题是固定的"联系人电话：156563221482"，尾部图标是一个表示删除的Icons.delete图标。通过使用List.generate函数，可以方便地生成指定数量的ListTile小部件，并将它们放入ListView中进行显示。

2. 使用动态高度的列表项：

ListView.builder(
  itemCount: itemList.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(itemList[index]),
    );
  },
)

ListView.builder(
        itemCount: 100  ,//一个回调函数：上下文，加一个索引
          itemBuilder: (BuildContext context, int index){
          return ListTile(
            title: Text("这一行列表$index"),
          );
          },
      )

3. 使用构建器函数构建列表项：

           分割线

ListView.separated(
  itemCount: itemList.length,
  separatorBuilder: (context, index) => Divider(),
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(itemList[index]),
    );
  },
)

ListView.separated(
          itemBuilder: (BuildContext context, int index){
             return ListTile(title: Text("这一行列表$index"),);
             },
          separatorBuilder: (context, index) {
           return Divider(
             color: Colors.red,
             height: 50,//线高
             thickness: 20,//线宽
             indent: 20,//起始缩进
             endIndent: 20,//结束缩进
           );
          } ,
          itemCount: 100,
      )

在上述示例中， `itemList` 是一个包含列表项数据的列表。可以根据实际需求来选择适合的ListView构造函数和参数。

总之，Flutter中的ListView是一个用于显示垂直或水平列表的常用UI控件，可以通过不同的构造函数和参数来构建各种类型的列表。

ListView({
    super.key,  // 继承自父类，用于标识和查找ListView的唯一键值。

    super.scrollDirection,  // 继承自父类，指定列表的滚动方向，可以是垂直或水平。

    super.reverse,  // 继承自父类，指定是否反转列表的滚动方向。

    super.controller,  // 继承自父类，用于控制和监听列表的滚动行为。

    super.primary,  // 继承自父类，指定是否将列表视图作为PrimaryScrollController。

    super.physics,  // 继承自父类，指定列表的滚动物理特性，例如滚动到边界时的效果。

    super.shrinkWrap,  // 继承自父类，指定是否根据子项的总高度来调整列表的大小。

    super.padding,  // 继承自父类，指定列表的内边距。

    this.itemExtent,  // 指定列表项的固定高度，可以提高性能，避免测量每个列表项的高度。

    this.prototypeItem,  // 指定列表项的原型，用于在构建列表项之前预先创建一个实例。

    bool addAutomaticKeepAlives = true,  // 指定是否自动保持列表项的活动状态。

    bool addRepaintBoundaries = true,  // 指定是否在列表项之间添加重绘边界，以避免不必要的重绘。

    bool addSemanticIndexes = true,  // 指定是否为列表项添加语义索引，以提供辅助功能支持。

    super.cacheExtent,  // 继承自父类，指定在滚动期间缓存的列表项范围。

    List<Widget> children = const <Widget>[],  // 包含列表项的Widget列表。

    int? semanticChildCount,  // 指定语义子项的数量，用于辅助功能支持。

    super.dragStartBehavior,  // 继承自父类，指定拖动行为的启动方式。

    super.keyboardDismissBehavior,  // 继承自父类，指定键盘消失的行为。

    super.restorationId,  // 继承自父类，用于恢复列表的状态。

    super.clipBehavior,  // 继承自父类，指定列表的裁剪行为。
})

GridView

是Flutter框架中的一个小部件，用于在网格布局中显示子小部件。下面是对GridView构造函数中每个参数的注释：

- super.key: 用于标识GridView的唯一键。
- super.scrollDirection: 指定滚动方向，可以是水平方向（Axis.horizontal）或垂直方向（Axis.vertical）。
- super.reverse: 是否反向滚动。
- super.controller: 指定GridView的滚动控制器。
- super.primary: 是否将GridView视为NestedScrollView的主要滚动视图。
- super.physics: 指定滚动行为的物理特性，如滚动到边界时的效果。
- super.shrinkWrap: 是否根据子小部件的大小来调整GridView的大小。
- super.padding: 指定GridView的内边距。
- required this.gridDelegate: 指定网格布局的委托，用于确定子小部件在网格中的位置和大小。
- bool addAutomaticKeepAlives: 是否自动保持子小部件的状态。
- bool addRepaintBoundaries: 是否在子小部件之间添加重绘边界。
- bool addSemanticIndexes: 是否为子小部件添加语义索引。
- super.cacheExtent: 指定在滚动过程中缓存的区域大小。
- List<Widget> children: 子小部件的列表。
- int? semanticChildCount: 子小部件的语义数量。
- super.dragStartBehavior: 指定拖动行为的启动方式。
- super.clipBehavior: 指定溢出部分的裁剪行为。
- super.keyboardDismissBehavior: 指定键盘消失的行为。
- super.restorationId: 用于恢复GridView状态的标识符。

GridView(
     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
       crossAxisCount: 2, // 每行显示的列数
       mainAxisSpacing: 10, // 主轴方向的间距
       crossAxisSpacing: 10, // 交叉轴方向的间距
       childAspectRatio: 1, // 子小部件的宽高比
     ),
     children: <Widget>[
       // 在此处添加子小部件
     ],
     或
     children: List.generate(100, (index){
          return Container(color: Color.fromARGB(255, Random().nextInt(256), 
                            Random().nextInt(256), Random().nextInt(256)),);
        })
   )

在上述代码中，我们使用了 SliverGridDelegateWithFixedCrossAxisCount 作为 gridDelegate 参数的值，用于指定网格布局的委托。可以根据需要调整 crossAxisCount 、 mainAxisSpacing 、 crossAxisSpacing 和 childAspectRatio 等属性来控制网格的布局。

SliverGridDelegateWithFixedCrossAxisCount

相当于GridView.count

 `SliverGridDelegateWithFixedCrossAxisCount` 是Flutter中的一个网格布局委托类，用于指定网格布局的一些属性。下面是对构造函数中第一项参数的解释：

- required this.crossAxisCount: 指定每行显示的列数。它是一个必需的参数，必须大于0。例如，如果 `crossAxisCount` 为2，则每行将显示2列。

其他参数的解释如下：

- this.mainAxisSpacing: 指定主轴方向（垂直方向）的间距，默认为0.0。可以通过调整该值来设置网格中子小部件之间的垂直间距。

- this.crossAxisSpacing: 指定交叉轴方向（水平方向）的间距，默认为0.0。可以通过调整该值来设置网格中子小部件之间的水平间距。

- this.childAspectRatio: 指定子小部件的宽高比，默认为1.0。它决定了子小部件在网格中的大小。例如，如果 `childAspectRatio` 为2.0，则子小部件的宽度是高度的两倍。

- this.mainAxisExtent: 在网格中指定主轴方向上的固定尺寸。如果设置了该值，则子小部件的主轴方向尺寸将固定为该值，而不考虑 `crossAxisCount` 和 `childAspectRatio` 的影响。

构造函数中的 `assert` 语句用于断言参数的有效性。在这里，它们确保 `crossAxisCount` 大于0， `mainAxisSpacing` 和 `crossAxisSpacing` 大于等于0，以及 `childAspectRatio` 大于0。如果断言条件不满足，将会抛出异常。

通过使用 `SliverGridDelegateWithFixedCrossAxisCount` ，你可以灵活地控制网格布局的列数、间距和子小部件的大小。

SliverGridDelegateWithMaxCrossAxisExtent

相当于GridView.extent

GridView(
        padding: EdgeInsets.all(10),

/*- maxCrossAxisExtent: 指定每个网格子小部件的最大横轴尺寸。例如，如果 maxCrossAxisExtent 为100，则每个网格子小部件的宽度将不超过100。 */

        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
         maxCrossAxisExtent: 100,
          mainAxisSpacing: 8,
          crossAxisSpacing: 8
        ),
        children: List.generate(100, (index){
          return Container(color: Color.fromARGB(255, Random().nextInt(256), 
                            Random().nextInt(256), Random().nextInt(256)),);
        })
      )

 `gridDelegate` 参数的值是 `SliverGridDelegateWithMaxCrossAxisExtent` ，它是用于指定网格布局的委托类。下面是该委托类的构造函数中的参数解释：

- maxCrossAxisExtent: 指定每个网格子小部件的最大横轴尺寸。例如，如果 `maxCrossAxisExtent` 为100，则每个网格子小部件的宽度将不超过100。
- mainAxisSpacing: 指定主轴方向（垂直方向）的间距，默认为0.0。可以通过调整该值来设置网格中子小部件之间的垂直间距。
- crossAxisSpacing: 指定交叉轴方向（水平方向）的间距，默认为0.0。可以通过调整该值来设置网格中子小部件之间的水平间距。

通过使用 `SliverGridDelegateWithMaxCrossAxisExtent` ，你可以根据每个子小部件的最大横轴尺寸来自动调整网格布局。在上述代码中，每个网格子小部件的最大宽度为100，主轴方向的间距为8，交叉轴方向的间距也为8。

创建GridView的几种方法如下：

1. 使用GridView.count构造函数：

GridView.count(
  crossAxisCount: 2, // 每行显示的列数
  children: <Widget>[
    // 在此处添加子小部件
  ],
)

在上述代码中，使用 `GridView.count` 构造函数可以创建一个具有固定列数的网格布局。通过设置 `crossAxisCount` 参数来指定每行显示的列数。然后在 `children` 列表中添加子小部件。

2. 使用GridView.builder构造函数：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 每行显示的列数
  ),
  itemBuilder: (BuildContext context, int index) {
    // 在此处构建每个子小部件
    return Container(
      color: Colors.blue,
      child: Text('Item $index'),
    );
  },
  itemCount: 10, // 子小部件的数量，不写将会是无穷
)

在上述代码中，使用 `GridView.builder` 构造函数可以根据需要动态构建子小部件。通过设置 `gridDelegate` 参数的 `SliverGridDelegateWithFixedCrossAxisCount` 来指定每行显示的列数。然后使用 `itemBuilder` 回调函数在每个索引位置构建子小部件。

3. 使用GridView.custom构造函数：

GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 每行显示的列数
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      // 在此处构建每个子小部件
      return Container(
        color: Colors.blue,
        child: Text('Item $index'),
      );
    },
    childCount: 10, // 子小部件的数量
  ),
)

1. 灵活性： GridView.custom 提供了最大的灵活性，因为它允许你完全自定义子小部件的构建方式。你可以使用 SliverChildDelegate 的不同子类来控制子小部件的生成，例如 SliverChildBuilderDelegate 、 SliverChildListDelegate 等。

2. 延迟构建：与其他构造方法不同， GridView.custom 是一种延迟构建的方式。它只会在需要显示子小部件时才会构建它们，而不是一次性构建所有子小部件。这对于大量子小部件的情况下，可以提高性能和效率。

3. 动态子小部件数量：使用 GridView.custom 时，你可以通过 SliverChildBuilderDelegate 的 childCount 参数来指定子小部件的数量。这使得你可以根据需要动态地确定子小部件的数量。 总的来说， GridView.custom 是一种高度可定制的构造方法，适用于需要更多控制和灵活性的情况。它允许你根据特定需求来生成子小部件，并且可以更好地处理大量子小部件的情况。

如果你需要更大的灵活性和自定义能力，以及处理大量子小部件的需求，那么选择 GridView.custom 是更合适的。

在上述代码中，使用 `GridView.custom` 构造函数可以创建一个自定义的网格布局。通过设置 `gridDelegate` 参数的 `SliverGridDelegateWithFixedCrossAxisCount` 来指定每行显示的列数。然后使用 `childrenDelegate` 参数的 `SliverChildBuilderDelegate` 来构建子小部件。

以上是创建GridView的几种常用方法，你可以根据具体需求选择适合的方法来创建网格布局。

Table

Table(
        border: TableBorder.all(
          color: Colors.black,
          width: 1.0,
          style: BorderStyle.solid,
        ),
        children: [
          TableRow(
            children: [
              TableCell(
                child: Container(
                  height: 50,
                  color: Colors.grey,
                  child: Center(child: Text('Cell 1')),
                ),
              ),
              TableCell(
                child: Container(
                  height: 50,
                  color: Colors.grey,
                  child: Center(child: Text('Cell 2')),
                ),
              ),
            ],
          ),
          TableRow(
            children: [
              TableCell(
                child: Container(
                  height: 50,
                  color: Colors.grey,
                  child: Center(child: Text('Cell 3')),
                ),
              ),
              TableCell(
                  child: Center(child: Text('Cell 4'),)
              ),
            ],
          ),
        ],
      )

在上述代码中，我们在Table的 border 属性中使用了 TableBorder.all 来指定边框样式。 TableBorder.all 接受一个 BorderSide 对象，用于指定边框的颜色、宽度和样式。在这个示例中，我们将边框颜色设置为黑色，宽度设置为1.0，样式设置为实线。 每个单元格都被放置在一个Container中，Container的高度设置为50，并设置了灰色背景和居中的文本。你可以根据需要自定义单元格的内容和样式。

Table(
  // 设置表格的边框风格
  border: TableBorder.all(),
  // 定义表格的列数
  columnWidths: const <int, TableColumnWidth>{
    0: FixedColumnWidth(80.0),
    1: FlexColumnWidth(),
    2: FixedColumnWidth(100.0),
  },
  // 子widget必须是TableRow类型
  children: <TableRow>[
    // 表头
    TableRow(
      children: <Widget>[
        Text('编号'),
        Text('名称'),
        Text('价格'),
      ],
    ),
    // 数据行
    TableRow(
      children: <Widget>[
        Text('001'),
        Text('苹果'),
        Text('10元'),
      ],
    ),
    TableRow(
      children: <Widget>[
        Text('002'),
        Text('香蕉'),
        Text('5元'),
      ],
    ),
    TableRow(
      children: <Widget>[
        Text('003'),
        Text('橘子'),
        Text('6元'),
      ],
    ),
  ],
)

这段代码创建了一个带有表头和三行数据的表格。Table widget的属性包括：border（表格边框的风格）、columnWidths（定义每一列的宽度）、children（表格的子widget，必须是TableRow类型）。TableRow widget的属性包括：children（单元格中的子widget）。

CustomScrollView

CustomScrollView 是 Flutter 中的一个组件，用于创建一个自定义的滚动视图。它允许你自定义滚动条、滚动行为以及子元素的布局。

CustomScrollView 通常用于创建可滚动的小部件，例如 ListView、GridView 或 TabBarView。要

当使用CustomScrollView构造函数创建一个自定义滚动视图时，以下是每个参数的解释：

- key: 用于标识CustomScrollView的唯一键。可以用于查找、更新或删除CustomScrollView。
- scrollDirection: 指定滚动视图的滚动方向，可以是水平方向（Axis.horizontal）或垂直方向 
     （Axis.vertical）。
- reverse: 布尔值，指定是否反转滚动方向。如果为true，则滚动方向将反转。
- controller: 指定一个ScrollController对象，用于控制CustomScrollView的滚动行为，如滚动到特定 
      位置或监听滚动事件。
- primary: 布尔值，指定CustomScrollView是否为主滚动视图。如果为true，则CustomScrollView将成为 
      主滚动视图，并且将响应滚动行为。
- physics: 指定CustomScrollView的滚动物理特性。可以使用预定义的ScrollPhysics对象，如 
     BouncingScrollPhysics、ClampingScrollPhysics等，或自定义的ScrollPhysics对象。
- scrollBehavior: 指定CustomScrollView的滚动行为。可以使用预定义的ScrollBehavior对象，如 
     GlowingOverscrollIndicatorScrollBehavior、MaterialScrollBehavior等，或自定义的 
     ScrollBehavior对象。
- shrinkWrap: 布尔值，指定是否根据子组件的总长度来调整CustomScrollView的尺寸。如果为true，则 
     CustomScrollView的尺寸将根据子组件的总长度进行调整。
- center: 布尔值，指定是否将滚动视图的内容居中显示。如果为true，则滚动视图的内容将居中显示。
- anchor: 指定滚动视图的锚点。可以是0.0（顶部）到1.0（底部）之间的值，用于确定滚动视图在可视区域 
     中的位置。
- cacheExtent: 指定滚动视图的缓存区域长度。当滚动视图滚动到离可视区域一定距离时，会提前加载子组 
     件的内容，以提高滚动性能。
- slivers: 一个包含多个Sliver组件的列表，用于构建CustomScrollView的内容。Sliver是一种特殊的可 
     滚动组件，可以实现更灵活的滚动效果。
- semanticChildCount: 指定滚动视图的语义子节点数量。用于辅助技术和可访问性。
- dragStartBehavior: 指定滚动视图的拖动开始行为。可以是DragStartBehavior.start（立即开始拖 
      动）、DragStartBehavior.down（按下时开始拖动）或DragStartBehavior.end（松开时开始拖 
      动）。
- keyboardDismissBehavior: 指定键盘消失的行为。可以是 
      ScrollViewKeyboardDismissBehavior.manual（手动控制键盘消失）或 
      ScrollViewKeyboardDismissBehavior.onDrag（拖动时键盘消失）。
- restorationId: 用于恢复滚动视图的标识符。当滚动视图被保存和恢复时，可以使用此标识符来唯一标识 
      滚动视图。
- clipBehavior: 指定滚动视图的剪切行为。可以是Clip.hardEdge（硬边剪切）或Clip.antiAlias（抗锯 
      齿剪切）。

在CustomScrollView的slivers参数中，可以使用以下Sliver组件来构建滚动视图的内容：

1. SliverList：创建一个垂直方向的可滚动列表。

CustomScrollView(
          slivers: [
            SliverList(
              delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 10,
              ),
            ),
          ],
        )

2. SliverGrid：创建一个网格布局的可滚动视图。

SliverGrid(
              delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index){
                return Container(color: Color.fromARGB(255, Random().nextInt(256),
                    Random().nextInt(256), Random().nextInt(256)),);
              },
                childCount: 15,

          ),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount:3,
                mainAxisSpacing: 10,
                crossAxisSpacing: 10,
                childAspectRatio: 1.0,
              ),

          ),

3. SliverAppBar：创建一个可滚动的应用栏。

SliverAppBar(
              leading:IconButton(
                icon: Icon(Icons.menu),
                onPressed: (){},
              ),
              expandedHeight: 300,
              pinned: true,//可以锁定标题
               title: Text("标题"),
              flexibleSpace: FlexibleSpaceBar(
                title:Text("标题"), 
                background: Image.asset("lib/assets/images/j.png",fit:BoxFit.cover,),)
            ) ,

4. SliverToBoxAdapter：将一个普通的组件包装为Sliver组件。
5. SliverPadding：为子组件添加内边距。

SliverPadding(
            padding: EdgeInsets.all(8),
            sliver: SliverGrid(
                delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index){
                  return Container(color: Color.fromARGB(255, Random().nextInt(256),
                      Random().nextInt(256), Random().nextInt(256)),);
                },
                  childCount: 15,

            ),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount:3,
                  mainAxisSpacing: 10,
                  crossAxisSpacing: 10,
                  childAspectRatio: 1.0,
                ),

            ),
          ),

6. SliverAnimatedList：创建一个可动画的列表。
7. SliverAnimatedOpacity：创建一个可动画的透明度效果。
8. SliverPersistentHeader：创建一个固定在顶部或底部的持久化头部。
9. SliverFillRemaining：填充剩余空间的Sliver组件。
10. SliverOverlapInjector：用于解决SliverAppBar和其他Sliver组件重叠的问题。

11.SliverSafeArea是一个Sliver组件，它提供了安全区域的功能，可以确保其子组件在滚动视图中不会被遮挡。

 SliverSafeArea(//安全区
            sliver: SliverGrid(
                delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index){
                  return Container(color: Color.fromARGB(255, Random().nextInt(256),
                      Random().nextInt(256), Random().nextInt(256)),);
                },
                  childCount: 15,

            ),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount:3,
                  mainAxisSpacing: 10,
                  crossAxisSpacing: 10,
                  childAspectRatio: 1.0,
                ),

            ),
          ),

这些Sliver组件提供了丰富的功能和布局选项，可以根据需要选择适合的组件来构建自定义滚动视图。

使用 CustomScrollView，你需要将其包裹在你的主组件中，并设置其子元素。例如：

CustomScrollView(
  scrollDirection: Axis.vertical, // 设置滚动方向为垂直
  child: ListView.builder(
    itemCount: 100, // 设置列表项数量
    itemBuilder: (context, index) {
      return ListTile(title: Text('Item $index')); // 设置列表项布局
    },
  ),
)

FittedBox

FittedBox（适配盒）是一个在Flutter中使用的小部件，它可以根据其子部件的大小进行自适应调整。当子部件的大小超过FittedBox的边界时，FittedBox会自动缩放子部件以适应边界。这对于在布局中调整和适配不同大小的部件非常有用。您可以使用FittedBox来确保子部件在任何尺寸的容器中都能适当地缩放和对齐。