高中数学01——基本初等函数的图形及其性质

在 Flutter 中，Container 是最常用、最基础的布局 Widget之一，它本质上是一个 可绘制的矩形盒子，可以用来控制 尺寸、边距、内边距、边框、背景色、形状和对齐方式。

Container 的定义：

Container({
    Key key,
    // 容器子Widget对齐方式
    this.alignment,
    // 容器内部padding
    this.padding,
    // 背景色
    Color color,
    // 背景装饰: 可设置背景色、边框、圆角、渐变、阴影等
    Decoration decoration,
    // 前景装饰
    this.foregroundDecoration,
    // 容器的宽度
    double width,
    // 容器的高度
    double height,
    // 容器大小的限制条件
    BoxConstraints constraints,
    // 容器外部margin
    this.margin,
    // 变换，如旋转
    this.transform,
    // 容器内子Widget
    this.child,
  })

BoxDecoration 装饰

在 Flutter 中，BoxDecoration 是一个用来 美化容器（Container）或其他可绘制盒子 Widget 的类，它属于 装饰（decoration） 的概念。

BoxDecoration = 容器的“外观样式”，控制背景、边框、圆角、阴影、渐变等视觉效果，而不是布局或尺寸。

const BoxDecoration({
  // 背景色
  this.color,
  // 背景图片
  this.image,
  // 边框样式
  this.border,
  // 边框圆角
  this.borderRadius,
  // 阴影
  this.boxShadow,
  // 渐变
  this.gradient,
  // 背景混合模式
  this.backgroundBlendMode,
  // 形状
  this.shape = BoxShape.rectangle,
})

示例

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Flutter Demo', home: const MyPage());
  }
}

const img1 = "https://linresource.uk/img/13399635147767705.jpg";

class MyPage extends StatelessWidget {
  const MyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // 约束父容器
        constraints: const BoxConstraints.expand(height: 400.0),

        // 外边距
        // EdgeInsets.only(top: 40): 仅设置上边距为 40.0 像素
        margin: const EdgeInsets.only(top: 40),

        // 内边距
        // EdgeInsets.all(30.0): 所有方向的内边距都设置为 30.0 像素
        padding: EdgeInsets.all(30.0),

        // 背景色
        // color: Colors.teal.shade700,

        // 子Widget: Alignment.centerLeft 表示左对齐且居中
        // Alignment.center 表示居中对齐
        alignment: Alignment.center,

        // 背景装饰
        decoration: BoxDecoration(
          // 背景色
          color: Colors.blueAccent,
          // 圆角
          borderRadius: BorderRadius.all(Radius.circular(20.0)),
          // 渐变
          // gradient: RadialGradient(
          //   colors: [Colors.red, Colors.orange],
          //   center: Alignment.topLeft,
          //   radius: .98,
          // ),
          // 阴影
          boxShadow: [
            BoxShadow(
              blurRadius: 10,
              offset: Offset(0, 50),
              color: Colors.blue,
            ),
          ],
          // 背景图
          image: DecorationImage(image: NetworkImage(img1), fit: BoxFit.cover),
          // 背景混合模式
          backgroundBlendMode: BlendMode.color,
          // 形状
          // shape: BoxShape.circle,
        ),

        // 前景装饰
        foregroundDecoration: BoxDecoration(
          // 前景色：withOpacity 已经过时
          // color: Colors.amber.withOpacity(0.5),
          // color: Colors.amber.withValues(alpha: 0.5),
          color: Colors.amber.withAlpha(128),
        ),

        // Container旋转
        transform: Matrix4.rotationZ(0.1),

        // 子Widget元素
        child: Text(
          'Hello World',
          style: Theme.of(
            context,
          ).textTheme.headlineMedium?.copyWith(color: Colors.white),
        ),
      ),
    );
  }
}

设置内外边距的方法

Container(
  padding: EdgeInsets.all(16), // 所有方向 16 像素
  child: Text('内边距示例'),
)

方法	说明
EdgeInsets.all(double value)	四个方向（上、下、左、右）相同值
EdgeInsets.symmetric({double vertical, double horizontal})	垂直方向和水平方向分别设置
EdgeInsets.only({left, top, right, bottom})	单独设置每个方向
EdgeInsets.fromLTRB(left, top, right, bottom)	另一种单独设置四个方向的方法

Colors组件的两个方法

withAlpha() 设置透明度

withAlpha(int a) 用 0~255 的值 设置透明度：

Color color = Colors.amber.withAlpha(128); // 半透明

0 → 完全透明

255 → 完全不透明

withValues()（Flutter 3.13+ 新 API）

Color withValues({
  double? alpha,
  double? red,
  double? green,
  double? blue,
  ColorSpace? colorSpace,
})

参数	类型	说明
alpha	double?	透明度，0.0 = 完全透明，1.0 = 不透明
red	double?	红色分量，0.0 ~ 1.0
green	double?	绿色分量，0.0 ~ 1.0
blue	double?	蓝色分量，0.0 ~ 1.0
colorSpace	ColorSpace?	颜色空间（可选，默认 sRGB）