Flutter 控件查阅清单-CFANZ编程社区

为了方便记录和使用Flutter中的各种控件，特写此博客以记之，好记性不如烂笔头嘛：）

通过控件的首字母进行查找，本文会持续更新

(控件目录)

A

B

C

D

E

F

G

S

Stack （堆叠控件）

Stack 允许子部件重叠，你可以自由地控制它们的位置、层级关系以及尺寸。 Stack 的构造函数如下：

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

以下是关于 Stack 的一些参数说明：

alignment: 设置子部件在 Stack 中的对齐方式，默认为 AlignmentDirectional.topStart，即顶部开始位置对齐。
textDirection: 用于确定文本方向，通常由父级部件提供。
fit: 定义子部件如何适应 Stack 的空间，默认为 StackFit.loose。StackFit.loose 允许子部件根据自身尺寸自由布局，StackFit.expand 则让子部件充满 Stack 的空间。
clipBehavior: 设置裁剪行为，默认为 Clip.none，表示不进行裁剪。
children: Stack 中包含的子部件列表。

以下是一个简单的例子，演示如何使用 Stack：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stack Example')),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
              Container(
                width: 150,
                height: 150,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，Stack 包含了三个彼此重叠的彩色 Container。由于它们都被放置在同一个 Stack 中，并且未指定具体位置，它们默认会在 Stack 的左上角（默认的 AlignmentDirectional.topStart）开始堆叠。你可以通过调整它们的位置和 alignment 属性来控制它们在 Stack 中的显示位置。

P

PhysicalModel （阴影、裁剪）

PhysicalModel 是 Flutter 中的一个 Widget，它可以在子部件周围创建一个物理模型（physical model）效果。物理模型通常用于为 UI 元素添加阴影、裁剪等效果，使其看起来更加立体和真实。

PhysicalModel 的构造函数如下：

PhysicalModel({
  Key? key,
  required this.color,
  this.shadowColor = const Color(0xFF000000),
  this.elevation = 0.0,
  this.bordeRadius = BorderRadius.zero,
  this.clipBehavior = Clip.none,
  Widget? child,
})

下面是关于 PhysicalModel 的一些参数说明：

color: 设置物理模型的颜色。
shadowColor: 设置物理模型的阴影颜色，默认为黑色。
elevation: 设置物理模型的高度（elevation），即阴影的程度。值越大，阴影越明显。
borderRadius: 设置物理模型的边框半径。
clipBehavior: 设置裁剪行为，默认为 Clip.none，表示不进行裁剪。
child: 要包裹的子部件。

下面是一个简单的例子，演示如何使用 PhysicalModel：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PhysicalModel Example'),
        ),
        body: Center(
          child: PhysicalModel(
            color: Colors.blue,
            shadowColor: Colors.black,
            elevation: 5.0,
            borderRadius: BorderRadius.circular(10.0),
            clipBehavior: Clip.antiAlias,
            child: Container(
              width: 100.0,
              height: 100.0,
              child: Center(
                child: Text(
                  'Hello',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}