前置知识点整理

Wrap

在 Flutter 中，`Wrap` 是一种布局小部件，用于在水平或垂直方向上自动换行子小部件。它类似于 CSS 中的 `flex-wrap`，适合用于需要动态换行的布局场景，比如标签云、照片网格等。

`Wrap` 的基本属性

• `direction`：决定子小部件的布局方向，默认为 `Axis.horizontal`。可以设置为 `Axis.vertical`，这将使子小部件从上到下排列。

• `alignment`：沿主轴对齐子小部件的方式。类似于 `Row` 和 `Column` 的 `mainAxisAlignment`。

• `spacing`：在主轴方向上的子小部件之间的间距。

• `runAlignment`：沿交叉轴对齐每个运行中的子小部件。类似于 `Column` 的 `crossAxisAlignment`。

• `runSpacing`：在交叉轴方向上的运行之间的间距。

• `clipBehavior`：决定超出边界的子小部件的裁剪方式。

简单示例

import 'package:flutter/material.dart';class WrapPageDemo extends StatelessWidget {const WrapPageDemo({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('Wrap Example')),body: Center(child: Wrap(direction: Axis.horizontal,alignment: WrapAlignment.start,spacing: 8.0,// 主轴（水平）方向上的间距runAlignment: WrapAlignment.center,runSpacing: 4.0,// 交叉轴（垂直）方向上的间距children: List.generate(10, (index) {return Chip(label: Text('Item $index'),avatar: CircleAvatar(backgroundColor: Colors.blue,child: Text('$index'),),);}),),),),);}
}

使用场景

• 动态布局：当您不知道子小部件的确切数量或者它们的大小可能会改变时，`Wrap` 可以帮助实现自适应布局。

• 响应式设计：在不同屏幕尺寸下需要不同的布局时，`Wrap` 可以动态地调整行和列的数量。

• 标签或按钮组：用于显示一组标签、按钮或其他小部件，这些小部件需要根据可用空间自动换行。

通过 `Wrap`，开发者可以轻松实现自适应的、灵活的布局，而不必手动管理换行和对齐问题。

EdgeInsets.symmetric

`EdgeInsets.symmetric` 是 Flutter 中的一个用于创建对称填充或边距的构造方法。它属于 `EdgeInsets` 类，这个类用于定义四个方向（上、下、左、右）的填充或边距。

`EdgeInsets.symmetric` 使用

`EdgeInsets.symmetric` 允许您同时指定水平和垂直方向的填充或边距，而不必为每个方向单独设置。它是 `EdgeInsets` 的一个便利构造方法，用于简化代码。

构造函数

EdgeInsets.symmetric({double horizontal = 0.0,double vertical = 0.0,
})

• `horizontal`: 控制左和右两侧的填充或边距。

• `vertical`: 控制上和下两侧的填充或边距。

使用场景

• 对称布局: 当您需要在小部件的两侧设置相同的边距或填充时，使用 `EdgeInsets.symmetric` 可以让代码更简洁。

• 快速布局调整: 通过调整水平和垂直参数，可以快速实现对称的视觉效果，非常适合用于按钮、卡片等需要均匀填充的 UI 组件。

`EdgeInsets.symmetric` 是一个非常有用的工具，用于简化 UI 布局和调整填充与边距，特别是在需要对称的情况下。

BoxDecoration

`BoxDecoration` 是 Flutter 中用于绘制容器（`Container`）背景的一个类。它允许您使用颜色、渐变、图像、边框和阴影等来装饰容器，从而创建丰富的视觉效果。`BoxDecoration` 常用于提升应用界面的美观性和用户体验。

`BoxDecoration` 的主要属性

以下是 `BoxDecoration` 类的主要属性及其用途：

1.`color`:

• 设置容器的背景颜色。

• 例如：`color: Colors.blue`。

2.`gradient`:

• 设置背景的渐变色。
• 支持线性渐变（`LinearGradient`）、径向渐变（`RadialGradient`）等。
• 例如：

gradient: LinearGradient(colors: [Colors.red, Colors.blue],begin: Alignment.topLeft,end: Alignment.bottomRight,
)

3.`image`:

• 设置背景图像。

• 使用 `DecorationImage` 来指定图像及其适配方式。

• 例如：

image: DecorationImage(image: AssetImage('assets/background.png'),fit: BoxFit.cover,
)

4.`border`:

• 设置容器的边框。

• 可以使用 `Border.all()` 创建统一的边框，或使用 `Border()` 设置不同方向的边框。

• 例如：

border: Border.all(color: Colors.black,width: 2.0,
)

5.`borderRadius`:

• 设置容器的圆角边框。

• 使用 `BorderRadius.circular()` 为四个角设置相同的圆角半径。

• 例如：`borderRadius: BorderRadius.circular(10.0)`

6.`boxShadow`:

• 设置容器的阴影效果。

• 使用 `BoxShadow` 来定义阴影的颜色、模糊半径、偏移等。

• 例如：

boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.5),spreadRadius: 5,blurRadius: 7,offset: Offset(0, 3), // changes position of shadow),
]

 

7.`shape`:

• 设置容器的形状。

• 可以是 `BoxShape.rectangle`（默认为矩形）或 `BoxShape.circle`。

• 注意：如果使用 `BoxShape.circle`，`borderRadius` 会被忽略。

 示例代码

import 'package:flutter/material.dart';class MyBoxDecorationDemoPage extends StatelessWidget {const MyBoxDecorationDemoPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('BoxDecoration Example'),),body: Center(child: Container(width: 200,height: 200,decoration: BoxDecoration(color: Colors.blue,borderRadius: BorderRadius.circular(15),boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.2),spreadRadius: 2,blurRadius: 2,offset: const Offset(3, 3))],border: Border.all(color: Colors.white, width: 2)),child: const Center(child: Text('Hello, Flutter!',style: TextStyle(color: Colors.white, fontSize: 18),),),),),);}
}

应用场景

`BoxDecoration` 非常适合用于需要自定义背景的组件，例如：

• 卡片视图：可以用来创建带有阴影和圆角的卡片。

• 按钮：通过 `BoxDecoration` 和 `GestureDetector`，可以创建自定义的按钮样式。

• 用户头像：结合 `BoxShape.circle` 和 `DecorationImage`，可以用来裁剪圆形头像。

通过 `BoxDecoration`，您可以灵活地控制容器的外观，使得 Flutter 应用能够根据设计需求进行细致的定制。

标签简单实现

import 'package:flutter/material.dart';class MyTagDemoPage extends StatelessWidget {const MyTagDemoPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("TagDemoPage"),),body: Wrap(children: <Widget>[const MyTagItem("Start"),for (var item in tags) MyTagItem(item),const MyTagItem("End"),],),);}
}class MyTagItem extends StatelessWidget {final String text;const MyTagItem(this.text, {super.key});@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),decoration: BoxDecoration(color: Colors.blueAccent.withAlpha(50),borderRadius: const BorderRadius.all(Radius.circular(5))),child: Text(text),);}
}const List<String> tags = ["AAAAAAAAAAAAA","BBBBBBBBBBB","C","DD","EEEEEEEEE","1111111111","222","%%%","****","@@@","**","ssssss"
];