Flutter中如何给独立dart文件内的Text组件传入外部定义的变量

Dart中变量存在作用域限制：

• 你在_HomePageState类中定义的restTime、restTimeOr是类的私有成员变量，仅能在HomePage的上下文范围内访问
• messages.dart中定义的全局rest Widget属于独立的作用域，完全无法访问HomePage中定义的变量，因此会抛出未定义错误
• 额外逻辑问题：你定义的rest是全局Widget，导入时就会完成初始化，不可能动态绑定其他页面的变量值

把messages.dart中的固定Widget改为可接收参数的动态组件，支持外部传入时间参数即可，以下是两种实现方式：

方案1：函数式组件实现（写法更简单） #

第一步：修改messages.dart代码 #

import 'package:flutter/material.dart';

// 改为接收两个参数的函数，调用时传入对应时间即可生成Widget
Widget buildRestText(String restTime, String restTimeOr) {
  return Text('You should rest $restTime or $restTimeOr');
}

第二步：修改main.dart中调用的代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        // 调用函数传入当前页面的两个时间变量
        buildRestText(restTime, restTimeOr),
      ],
    ),
  );
}

方案2：自定义Widget实现（规范度更高，适合复杂场景） #

第一步：修改messages.dart代码 #

import 'package:flutter/material.dart';

class RestText extends StatelessWidget {
  // 定义要接收的两个参数
  final String restTime;
  final String restTimeOr;

  const RestText({
    super.key,
    required this.restTime,
    required this.restTimeOr
  });

  @override
  Widget build(BuildContext context) {
    return Text('You should rest $restTime or $restTimeOr');
  }
}

第二步：修改main.dart中调用的代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        // 初始化组件时传入两个时间变量
        RestText(restTime: restTime, restTimeOr: restTimeOr),
      ],
    ),
  );
}

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