如何在WatchShape的builder中返回Scaffold？解决类型不匹配错误

问题说明 #

开发基于Flutter Wear的体温追踪应用时，在WatchShape组件的builder中返回Scaffold出现编译错误，错误提示：

参数类型'Scaffold Function(BuildContext, WearShape)'无法赋值给参数类型'Widget Function(BuildContext, WearShape, Widget?)'

原始代码 #

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Body Temperature Tracker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<double> _kayit = [36.5, 36.7, 37.2, 36.9, 37.4];

  void _addRecord(double value) {
    setState(() {
      _kayit.add(value);
    });
  }

  void _removeRecord(int index) {
    setState(() {
      _kayit.removeAt(index);
    });
  }

  double _calculateAverage() {
    double sum = 0;
    for (double record in _kayit) {
      sum += record;
    }
    return sum / _kayit.length;
  }

  @override
  Widget build(BuildContext context) {
    return WatchShape(
      builder: (context, shape) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Body Temperature Tracker'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Your average body temperature is:',
                  style: TextStyle(fontSize: 18),
                ),
                Text(
                  '${_calculateAverage().toStringAsFixed(1)} °C',
                  style: TextStyle(fontSize: 24),
                ),
                SizedBox(height: 16),
                Text(
                  'Your latest records are:',
                  style: TextStyle(fontSize: 18),
                ),
                Expanded(
                  child: ListView.builder(
                    itemCount: _kayit.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('${_kayit[index]} °C'),
                        trailing: IconButton(
                          icon: Icon(Icons.delete),
                          onPressed: () => _removeRecord(index),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              double value = 36 + 2 * Math.random();
              _addRecord(value);
            },
            tooltip: 'Add a new record',
            child: Icon(Icons.add),
          ),
        );
      },
    );
  }
}

错误信息 #

[{
    "resource": "/C:/src/flutter_project/flutter_application_9/lib/main.dart",
    "owner": "_generated_diagnostic_collection_name_#2",
    "code": {
        "value": "argument_type_not_assignable",
        "target": {
            "$mid": 1,
            "path": "/diagnostics/argument_type_not_assignable",
            "scheme": "https",
            "authority": "dart.dev"
        }
    },
    "severity": 8,
    "message": "The argument type 'Scaffold Function(BuildContext, WearShape)' can't be assigned to the parameter type 'Widget Function(BuildContext, WearShape, Widget?)'.",
    "source": "dart",
    "startLineNumber": 52,
    "startColumn": 16,
    "endLineNumber": 100,
    "endColumn": 8
}]

修复方案 #

1. 修正builder参数数量
   WatchShape的builder函数要求接收三个参数：BuildContext、WearShape、可选的Widget（child参数），你的代码只定义了前两个，需要补充第三个参数（可以用下划线_忽略，因为不需要使用它）：

builder: (context, shape, _) { // 新增下划线参数
  return Scaffold(
    // ... 原有代码不变
  );
}

2. 修复随机数生成问题
   Dart中没有Math.random()，需要使用dart:math包中的Random().nextDouble()，步骤如下：

• 导入dart:math包：

import 'dart:math';

• 修改FloatingActionButton的onPressed逻辑：

floatingActionButton: FloatingActionButton(
  onPressed: () {
    double value = 36 + 2 * Random().nextDouble(); // 修正随机数生成
    _addRecord(value);
  },
  tooltip: 'Add a new record',
  child: Icon(Icons.add),
),

最终可运行代码 #

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:wear/wear.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Body Temperature Tracker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<double> _kayit = [36.5, 36.7, 37.2, 36.9, 37.4];

  void _addRecord(double value) {
    setState(() {
      _kayit.add(value);
    });
  }

  void _removeRecord(int index) {
    setState(() {
      _kayit.removeAt(index);
    });
  }

  double _calculateAverage() {
    double sum = 0;
    for (double record in _kayit) {
      sum += record;
    }
    return sum / _kayit.length;
  }

  @override
  Widget build(BuildContext context) {
    return WatchShape(
      builder: (context, shape, _) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Body Temperature Tracker'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Your average body temperature is:',
                  style: TextStyle(fontSize: 18),
                ),
                Text(
                  '${_calculateAverage().toStringAsFixed(1)} °C',
                  style: TextStyle(fontSize: 24),
                ),
                SizedBox(height: 16),
                Text(
                  'Your latest records are:',
                  style: TextStyle(fontSize: 18),
                ),
                Expanded(
                  child: ListView.builder(
                    itemCount: _kayit.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('${_kayit[index]} °C'),
                        trailing: IconButton(
                          icon: Icon(Icons.delete),
                          onPressed: () => _removeRecord(index),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              double value = 36 + 2 * Random().nextDouble();
              _addRecord(value);
            },
            tooltip: 'Add a new record',
            child: Icon(Icons.add),
          ),
        );
      },
    );
  }
}

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