Flutter中如何避免代码重复？多文件重复代码统一修改方案求助

AI 小北

2026-7-26

解决方案

核心思路是提取公共可复用组件，把固定不变的代码封装成独立Widget，将差异部分作为参数传入，后续修改公共逻辑只需改一处，所有使用该组件的地方都会同步更新。

步骤1：创建公共组件文件

新建base_scaffold.dart，将两个文件中重复的代码封装成带参数的StatelessWidget，把差异的文本作为必填参数：

import 'package:flutter/material.dart';

class BaseScaffold extends StatelessWidget {
  // 定义差异部分的参数
  final String thirdText;

  // 构造函数，传入参数
  const BaseScaffold({super.key, required this.thirdText});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const Text('one'),
          const Text('two'),
          // 使用传入的参数替换差异内容
          Text(thirdText),
        ],
      ),
    );
  }
}

步骤2：在原文件中复用公共组件

修改first.dart，导入公共组件并传入对应参数：

import 'package:flutter/material.dart';
import 'base_scaffold.dart';

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

  @override
  Widget build(BuildContext context) {
    // 传入'three'作为差异文本
    return const BaseScaffold(thirdText: 'three');
  }
}

修改second.dart，同样导入公共组件并传入不同参数：

import 'package:flutter/material.dart';
import 'base_scaffold.dart';

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

  @override
  Widget build(BuildContext context) {
    // 传入'four'作为差异文本
    return const BaseScaffold(thirdText: 'four');
  }
}