Flutter中如何为Divisions类实例设置不同的Positioned right属性值

要实现创建Divisions实例时仅修改Positioned的right属性，你可以给Divisions类添加一个可选参数来控制这个值，具体实现如下：

1. 修改Divisions组件类 #

在原有的Divisions类中新增一个可选的double类型参数，用于指定Positioned的right值，并设置默认值为原有的-10——这样不传入该参数时，组件会保持原有行为：

import 'package:flutter/material.dart';

import '../utilities/constants.dart';

class Divisions extends StatelessWidget {
  final String? image;
  final String? title;
  // 添加控制stars图标right位置的参数，默认值沿用原有的-10
  final double starsRightPosition;

  const Divisions({
    Key? key,
    this.image,
    this.title,
    // 设置默认值，兼容原有调用方式
    this.starsRightPosition = -10,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          // 用自定义参数替换固定值
          right: starsRightPosition,
          child: Image.asset(
            '${kImagesPath}stars.png',
            color: Colors.blue,
          ),
        ),
        Container(
          padding: const EdgeInsets.all(20),
          width: 145,
          height: 145,
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
          ),
          child: Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.transparent,
              border: Border.all(
                width: 4,
                color: Colors.blue,
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  ImageIcon(
                    size: 45,
                    AssetImage(image!),
                    color: Colors.blue,
                  ),
                  Text(
                    title!,
                    style: kDefaultFontStyle,
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

2. 在其他文件中创建自定义实例 #

现在你可以在任意dart文件中创建Divisions实例时，传入不同的starsRightPosition值来修改Positioned的right属性，同时保留所有子组件的原有结构：

// 示例：在另一个Widget中使用自定义实例
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          // 默认样式，right为-10
          Divisions(image: 'assets/icons/icon1.png', title: '默认'),
          // 自定义right值为-20的实例
          Divisions(
            image: 'assets/icons/icon2.png',
            title: '左移',
            starsRightPosition: -20,
          ),
          // 自定义right值为0的实例
          Divisions(
            image: 'assets/icons/icon3.png',
            title: '靠右',
            starsRightPosition: 0,
          ),
        ],
      ),
    );
  }
}

这种方式既保留了组件的原有功能，又避免了重复编写组件代码，同时提供了灵活的自定义能力。

内容的提问来源于stack exchange，提问作者Ahmed Loutfy