Positioned高级定位技巧

[H*]2026-01-27 12:19

Positioned高级定位技巧

一、Positioned组件深入理解

Positioned是Flutter中用于在Stack内实现精确定位的核心组件。它提供了基于Stack边界的相对定位能力，通过设置left、right、top、bottom、width、height等属性，可以实现子组件的精确控制。Positioned的设计思想是提供一种直观且强大的定位方式，让开发者能够轻松实现复杂的布局需求。

Positioned的核心功能

Positioned组件
精确定位
尺寸控制
相对定位
自适应布局
绝对定位
相对边界
像素级精度
多属性组合
固定尺寸
自适应尺寸
宽高独立控制
约束传递
左上定位
右下定位
中心定位
混合定位
双向拉伸
单向拉伸
尺寸自适应
响应式布局

Positioned的优势在于它提供了非常灵活的定位方式。通过不同的属性组合，可以实现固定尺寸、自适应尺寸、居中对齐等多种布局效果。这种灵活性使得Positioned成为实现复杂UI布局的利器。

二、Positioned属性详解

完整属性表

属性名 类型 说明 是否必需 默认值
left double? 距离Stack左边的距离 否 null
right double? 距离Stack右边的距离 否 null
top double? 距离Stack上边的距离 否 null
bottom double? 距离Stack底边的距离 否 null
width double? 组件的宽度 否 null
height double? 组件的高度 否 null
child Widget 要定位的子组件 是 -

属性使用规则

Positioned的属性使用遵循以下规则：

  1. 边距属性（left、right、top、bottom）：这些属性是可选的，可以单独使用，也可以组合使用。至少需要指定两个边距属性（水平和垂直方向各一个）才能确定位置。

  2. 尺寸属性（width、height）：这些属性也是可选的。如果同时指定了两个方向的边距属性，则不需要指定对应的尺寸属性，组件会自动计算尺寸。

  3. 必需属性：child属性是必需的，Positioned必须包含一个子组件。

属性组合矩阵

left right top bottom width height 效果
✓ ✗ ✓ ✗ ✓ ✗ 左上定位，固定宽高
✓ ✗ ✓ ✗ ✗ ✓ 左上定位，固定高度，宽度自适应
✓ ✓ ✓ ✗ ✗ ✓ 上边定位，高度自适应，宽度自适应
✓ ✓ ✓ ✓ ✗ ✗ 四边定位，尺寸完全自适应
✗ ✓ ✗ ✓ ✓ ✗ 右下定位，固定宽高
✗ ✗ ✓ ✓ ✓ ✓ 下边定位，固定宽高

三、基础定位方式

方式一：固定位置固定尺寸

这是最基础的定位方式，通过指定left、top、width、height实现固定的位置和尺寸。

dart 复制代码 
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Positioned高级定位',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
        useMaterial3: true,
      ),
      home: const PositionedAdvancedPage(),
    );
  }
}

class PositionedAdvancedPage extends StatefulWidget {
  const PositionedAdvancedPage({super.key});

  @override
  State<PositionedAdvancedPage> createState() => _PositionedAdvancedPageState();
}

class _PositionedAdvancedPageState extends State<PositionedAdvancedPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Positioned高级定位'),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: SizedBox(
          width: 300,
          height: 300,
          child: Stack(
            children: [
              // 背景容器
              Container(
                decoration: BoxDecoration(
                  color: Colors.grey.shade200,
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
              // 左上角红色方块
              Positioned(
                left: 20,
                top: 20,
                width: 80,
                height: 80,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(10),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.2),
                        blurRadius: 5,
                      ),
                    ],
                  ),
                ),
              ),
              // 右上角绿色方块
              Positioned(
                right: 20,
                top: 20,
                width: 80,
                height: 80,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(10),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.2),
                        blurRadius: 5,
                      ),
                    ],
                  ),
                ),
              ),
              // 左下角蓝色方块
              Positioned(
                left: 20,
                bottom: 20,
                width: 80,
                height: 80,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(10),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.2),
                        blurRadius: 5,
                      ),
                    ],
                  ),
                ),
              ),
              // 右下角橙色方块
              Positioned(
                right: 20,
                bottom: 20,
                width: 80,
                height: 80,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.orange,
                    borderRadius: BorderRadius.circular(10),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.2),
                        blurRadius: 5,
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解析

这个示例展示了四种基础定位方式：

  1. 左上定位：使用left=20和top=20将红色方块定位在左上角，同时设置width=80和height=80固定其尺寸。

  2. 右上定位：使用right=20和top=20将绿色方块定位在右上角，保持相同的尺寸。

  3. 左下定位：使用left=20和bottom=20将蓝色方块定位在左下角。

  4. 右下定位：使用right=20和bottom=20将橙色方块定位在右下角。

这种方式的特点是位置和尺寸都是固定的，适合实现明确的布局需求，比如按钮、图标等固定位置的元素。

四、自适应尺寸定位

方式二：双向拉伸定位

通过同时设置left和right，或者top和bottom，可以让组件在相应方向上自适应拉伸。

dart 复制代码 
Stack(
  children: [
    Container(
      color: Colors.grey.shade300,
      child: const Center(child: Text('300x300 Stack')),
    ),
    // 水平拉伸，固定高度
    Positioned(
      left: 20,
      right: 20,
      top: 50,
      height: 60,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(10),
        ),
        child: const Center(
          child: Text(
            '水平拉伸',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ),
    // 垂直拉伸，固定宽度
    Positioned(
      left: 50,
      top: 150,
      bottom: 50,
      width: 80,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.circular(10),
        ),
        child: const Center(
          child: Text(
            '垂直拉伸',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ),
    // 四向拉伸
    Positioned(
      left: 40,
      right: 40,
      top: 40,
      bottom: 40,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.orange.withOpacity(0.3),
          borderRadius: BorderRadius.circular(10),
          border: Border.all(color: Colors.orange, width: 2),
        ),
        child: const Center(
          child: Text(
            '四向拉伸',
            style: TextStyle(color: Colors.orange),
          ),
        ),
      ),
    ),
  ],
)

拉伸定位的优势

自适应尺寸定位的优势在于：

  1. 响应式布局：当Stack尺寸变化时，自适应定位的组件会自动调整，保持相对位置不变。

  2. 简化代码：不需要手动计算组件的宽高，让Flutter自动处理尺寸计算。

  3. 维护性好：当布局需求变化时，只需要调整边距值，不需要重新计算尺寸。

拉伸定位对比表

定位方式 width height left right top bottom 适用场景
水平拉伸 auto 固定 ✓ ✓ ✓/✗ ✗ 顶部/底部栏
垂直拉伸 固定 auto ✗ ✓/✗ ✓ ✓ 侧边栏
四向拉伸 auto auto ✓ ✓ ✓ ✓ 覆盖层、遮罩

五、混合定位方式

方式三：固定与自适应结合

有时候需要在一个方向上固定尺寸，在另一个方向上自适应，这种混合定位非常实用。

dart 复制代码 
Stack(
  children: [
    Container(
      color: Colors.grey.shade300,
      child: const Center(child: Text('300x300 Stack')),
    ),
    // 顶部栏：左右拉伸，高度固定
    Positioned(
      left: 0,
      right: 0,
      top: 0,
      height: 60,
      child: Container(
        color: Colors.blue.shade700,
        child: const Padding(
          padding: EdgeInsets.symmetric(horizontal: 16),
          child: Row(
            children: [
              Icon(Icons.menu, color: Colors.white),
              Spacer(),
              Text('顶部栏', style: TextStyle(color: Colors.white)),
              Spacer(),
              Icon(Icons.search, color: Colors.white),
            ],
          ),
        ),
      ),
    ),
    // 底部栏：左右拉伸，高度固定
    Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      height: 80,
      child: Container(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10,
            offset: const Offset(0, -2),
          ),
        ],
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            _buildBottomItem(Icons.home, '首页'),
            _buildBottomItem(Icons.search, '搜索'),
            _buildBottomItem(Icons.favorite, '收藏'),
            _buildBottomItem(Icons.person, '我的'),
          ],
        ),
      ),
    ),
    // 右侧按钮：固定尺寸
    Positioned(
      right: 10,
      bottom: 100,
      width: 50,
      height: 50,
      child: FloatingActionButton(
        onPressed: () {},
        backgroundColor: Colors.red,
        child: const Icon(Icons.add, color: Colors.white),
      ),
    ),
  ],
)

Widget _buildBottomItem(IconData icon, String label) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(icon, color: Colors.grey),
      const SizedBox(height: 4),
      Text(label, style: const TextStyle(fontSize: 12, color: Colors.grey)),
    ],
  );
}

混合定位的应用场景

这种混合定位方式非常适合构建复杂的UI界面：

  1. 应用栏：水平方向拉伸填满屏幕，垂直方向固定高度
  2. 底部导航：与顶部栏类似，水平拉伸，垂直固定
  3. 悬浮按钮：固定位置固定尺寸，不随布局变化
  4. 侧边栏：垂直方向拉伸，水平方向固定宽度

混合定位特点表

UI元素 水平定位 垂直定位 尺寸特点 交互特点
顶部栏 left+right top 宽自适应，高固定 始终可见
底部栏 left+right bottom 宽自适应，高固定 始终可见
悬浮按钮 right bottom 宽高固定 可点击
侧边栏 left/right top+bottom 宽固定，高自适应 可滑动

六、定位动画实现

使用AnimatedPositioned

Flutter提供了AnimatedPositioned组件，它是Positioned的动画版本，可以平滑地过渡位置和尺寸的变化。

dart 复制代码 
import 'package:flutter/material.dart';

class AnimatedPositionedDemo extends StatefulWidget {
  const AnimatedPositionedDemo({super.key});

  @override
  State<AnimatedPositionedDemo> createState() => _AnimatedPositionedDemoState();
}

class _AnimatedPositionedDemoState extends State<AnimatedPositionedDemo> {
  bool _isMoved = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('定位动画'),
      ),
      body: Stack(
        children: [
          Container(
            color: Colors.grey.shade200,
            child: const Center(child: Text('点击按钮移动方块')),
          ),
          AnimatedPositioned(
            duration: const Duration(milliseconds: 500),
            curve: Curves.easeInOut,
            left: _isMoved ? 200 : 20,
            top: _isMoved ? 200 : 20,
            width: 100,
            height: 100,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(10),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.3),
                    blurRadius: 10,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isMoved = !_isMoved;
          });
        },
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}

动画参数说明

参数 类型 说明 推荐值
duration Duration 动画持续时间 200-500ms
curve Curve 动画曲线 Curves.easeInOut
onEnd VoidCallback 动画结束回调 可选

常用动画曲线

dart 复制代码 
// 线性动画
Curves.linear

// 缓动效果
Curves.easeIn       // 从慢到快
Curves.easeOut      // 从快到慢
Curves.easeInOut    // 两头慢中间快

// 弹性效果
Curves.elasticIn    // 弹性进入
Curves.elasticOut   // 弹性退出
Curves.elasticInOut // 弹性进出

// 回弹效果
Curves.bounceIn     // 回弹进入
Curves.bounceOut    // 回弹退出
Curves.bounceInOut  // 回弹进出

动画应用场景

定位动画在以下场景中非常实用：

  1. 页面切换：新页面从边缘滑入或淡入
  2. 展开收起：侧边栏、下拉菜单的展开收起
  3. 提示气泡：通知气泡从某个位置弹出
  4. 拖拽交互：用户拖拽后元素平滑移动到新位置

七、复杂定位组合

场景：相册图片标记

在实际应用中，经常需要在图片上标记多个位置，比如人脸相册中标记人脸位置、地图上标记地点等。

dart 复制代码 
import 'package:flutter/material.dart';

class PhotoMarkerDemo extends StatefulWidget {
  const PhotoMarkerDemo({super.key});

  @override
  State<PhotoMarkerDemo> createState() => _PhotoMarkerDemoState();
}

class _PhotoMarkerDemoState extends State<PhotoMarkerDemo> {
  final List<Marker> _markers = [
    Marker(x: 0.2, y: 0.3, label: '人物1', color: Colors.red),
    Marker(x: 0.7, y: 0.4, label: '人物2', color: Colors.green),
    Marker(x: 0.5, y: 0.6, label: '人物3', color: Colors.blue),
    Marker(x: 0.3, y: 0.8, label: '物体', color: Colors.orange),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('图片标记'),
      ),
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Stack(
          fit: StackFit.expand,
          children: [
            // 背景图片
            Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [Colors.lightBlue, Colors.lightGreen],
                ),
              ),
            ),
            // 标记点
            ..._markers.map((marker) => _buildMarker(marker)),
          ],
        ),
      ),
    );
  }

  Widget _buildMarker(Marker marker) {
    return Positioned(
      left: MediaQuery.of(context).size.width * marker.x - 20,
      top: MediaQuery.of(context).size.height * marker.y - 40,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
            decoration: BoxDecoration(
              color: marker.color,
              borderRadius: BorderRadius.circular(4),
            ),
            child: Text(
              marker.label,
              style: const TextStyle(color: Colors.white, fontSize: 12),
            ),
          ),
          const Icon(Icons.location_on, color: marker.color, size: 40),
        ],
      ),
    );
  }
}

class Marker {
  final double x;
  final double y;
  final String label;
  final Color color;

  Marker({
    required this.x,
    required this.y,
    required this.label,
    required this.color,
  });
}

标记定位计算

这个示例展示了如何根据相对坐标计算绝对定位位置：

  1. 相对坐标：标记位置使用0-1之间的相对坐标表示，这样无论屏幕尺寸如何变化，标记的相对位置保持不变。

  2. 绝对定位：通过MediaQuery获取屏幕尺寸，将相对坐标转换为绝对定位的left和top值。

  3. 居中偏移：在计算定位时减去组件尺寸的一半，使标记点中心对齐到目标位置。

坐标转换公式

dart 复制代码 
// 相对坐标转绝对坐标
double absoluteX = screenWidth * relativeX - markerWidth / 2;
double absoluteY = screenHeight * relativeY - markerHeight / 2;

// 绝对坐标转相对坐标
double relativeX = absoluteX / screenWidth;
double relativeY = absoluteY / screenHeight;

八、Positioned.fromRect

使用Rect进行定位

Positioned.fromRect提供了另一种定位方式，通过Rect（矩形）来定义组件的位置和尺寸，这种方式在某些场景下更加直观。

dart 复制代码 
Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      child: const Center(child: Text('Stack容器')),
    ),
    // 使用fromRect定位
    Positioned.fromRect(
      rect: Rect.fromLTWH(20, 20, 100, 100),
      child: Container(
        color: Colors.red,
        child: const Center(child: Text('Rect 1')),
      ),
    ),
    // 使用fromRect定位
    Positioned.fromRect(
      rect: Rect.fromPoints(
        const Offset(150, 20),
        const Offset(280, 120),
      ),
      child: Container(
        color: Colors.green,
        child: const Center(child: Text('Rect 2')),
      ),
    ),
    // 使用fromLTRB定位
    Positioned.fromRect(
      rect: Rect.fromLTRB(20, 150, 120, 250),
      child: Container(
        color: Colors.blue,
        child: const Center(child: Text('Rect 3')),
      ),
    ),
  ],
)

Rect创建方法

方法 说明 参数 适用场景
fromLTWH 左上角+宽高 left, top, width, height 基础矩形
fromPoints 对角线两点 Offset, Offset 两点确定矩形
fromLTRB 四边坐标 left, top, right, bottom 四边确定矩形
fromCircle 圆形转换 center, radius 圆形区域

Rect的优势

使用Rect定位的优势：

  1. 直观性：Rect可以直接描述一个矩形区域，语义更清晰
  2. 计算友好：在进行几何计算时，Rect提供了丰富的方法
  3. 兼容性好：很多图形计算库使用Rect作为基本数据结构

Rect常用方法

dart 复制代码 
// 矩形属性
Rect rect = Rect.fromLTWH(10, 10, 100, 100);
print(rect.left);      // 10
print(rect.top);       // 10
print(rect.right);     // 110
print(rect.bottom);    // 110
print(rect.width);     // 100
print(rect.height);    // 100
print(rect.size);      // Size(100, 100)
print(rect.center);    // Offset(60, 60)

// 矩形运算
Rect rect1 = Rect.fromLTWH(0, 0, 100, 100);
Rect rect2 = Rect.fromLTWH(50, 50, 100, 100);

// 判断相交
rect1.overlaps(rect2); // true

// 扩展矩形
rect1.expandToInclude(rect2);

// 平移矩形
rect1.shift(const Offset(10, 10));

九、Positioned.fill

填充Stack的快捷方式

Positioned.fill是一个便捷的构造函数，相当于同时设置left、right、top、bottom都为0，让子组件填满整个Stack。

dart 复制代码 
Stack(
  children: [
    // 背景层
    Positioned.fill(
      child: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.blue, Colors.purple],
          ),
        ),
      ),
    ),
    // 内容层
    Positioned(
      top: 100,
      left: 50,
      right: 50,
      bottom: 100,
      child: Container(
        color: Colors.white,
        child: const Center(child: Text('内容区域')),
      ),
    ),
  ],
)

等价代码对比

dart 复制代码 
// 使用Positioned.fill
Positioned.fill(
  child: Container(color: Colors.red),
)

// 等价于
Positioned(
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  child: Container(color: Colors.red),
)

Positioned.fill的应用场景

场景 说明 示例
全屏背景 创建全屏渐变或图片背景 Positioned.fill + Container
遮罩层 创建半透明遮罩 Positioned.fill + Opacity
加载动画 全屏加载指示器 Positioned.fill + CircularProgressIndicator
模态窗口 背景半透明的对话框 Positioned.fill + Dialog

十、Positioned性能优化

优化策略

在使用Positioned时，合理的优化策略可以显著提升性能表现。

性能优化表

优化项 问题 优化方案 性能提升
减少重绘 Positioned变化导致Stack重绘 使用const静态组件 30-50%
避免嵌套 多层Positioned增加计算复杂度 扁平化布局 20-30%
合理使用动画 复杂动画消耗性能 使用AnimatedBuilder 40-60%
控制组件数量 过多Positioned影响布局 合并可合并的组件 15-25%

优化示例对比

dart 复制代码 
// 不推荐：频繁变化的Positioned
Stack(
  children: [
    for (var i = 0; i < 10; i++)
      Positioned(
        left: _positions[i].dx,
        top: _positions[i].dy,
        child: _buildItem(i),
      ),
  ],
)

// 推荐：使用性能更好的方案
Stack(
  children: [
    for (var i = 0; i < 10; i++)
      _buildOptimizedItem(i),
  ],
)

Widget _buildOptimizedItem(int index) {
  return AnimatedBuilder(
    animation: _animationControllers[index],
    builder: (context, child) {
      return Positioned(
        left: _positions[index].dx,
        top: _positions[index].dy,
        child: child!,
      );
    },
    child: const _ItemWidget(), // const子组件不会重建
  );
}

监控和调试

使用Flutter的调试工具监控Positioned性能：

dart 复制代码 
// 启用性能图层
MaterialApp(
  debugShowCheckedModeBanner: false,
  showPerformanceOverlay: true, // 显示性能叠加层
  home: const MyApp(),
)

// 在具体页面使用RepaintBoundary
RepaintBoundary(
  child: Stack(
    children: [
      Positioned(...),
      Positioned(...),
    ],
  ),
)

RepaintBoundary可以隔离重绘范围，只有其子树发生变化时才会重绘，这对于包含多个Positioned的Stack特别有效。

通过以上的优化策略和技巧，可以充分发挥Positioned组件的强大功能，同时保持应用的流畅性和高性能。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

相关推荐
倾国倾城的反派修仙者2 小时前
鸿蒙开发——使用弹窗授权保存媒体库资源
开发语言·前端·华为·harmonyos
b2077212 小时前
Flutter for OpenHarmony 身体健康状况记录App实战 - 数据导出实现
python·flutter·harmonyos
雨季6662 小时前
构建 OpenHarmony 简易 BMI 健康指数计算器：用基础数学实现健康自评
javascript·flutter·ui·自动化·dart
●VON2 小时前
Flutter for OpenHarmony：基于选择模式状态机与原子批量更新的 TodoList 批量操作子系统实现
学习·flutter·ui·openharmony·von
一起养小猫2 小时前
Flutter for OpenHarmony 实战：贪吃蛇蛇的移动逻辑详解
android·flutter
晚霞的不甘3 小时前
Flutter for OpenHarmony：从零到一：构建购物APP的骨架与精美UI
前端·javascript·flutter·ui·前端框架·鸿蒙
kirk_wang3 小时前
Flutter艺术探索-Freezed代码生成：不可变数据模型实战
flutter·移动开发·flutter教程·移动开发教程
b2077213 小时前
Flutter for OpenHarmony 身体健康状况记录App实战 - 运动分析实现
python·flutter·harmonyos
子春一3 小时前
Flutter for OpenHarmony:用 Flutter 构建一个数字猜谜游戏：从零开始的交互式应用开发
javascript·flutter·游戏
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03Claude Code Skills 实用使用手册04Open Code教程（四）| 高级配置与集成05UV安装并设置国内源06Linux下V2Ray安装配置指南07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）08AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南09Labelme从安装到标注：零基础完整指南10struts2 XML外部实体注入漏洞复现（CVE-2025-68493）