面试题：Flutter自定义Widget与平台交互及深度定制

Flutter插件开发
- 创建一个Flutter插件项目，按照Flutter插件的目录结构组织代码。
- 在lib目录下编写Flutter端的代码，定义与原生交互的接口。
平台通道使用
- 选择通道类型：根据需求选择合适的平台通道，如基本的MethodChannel用于方法调用，EventChannel用于接收持续事件流（如传感器实时数据）。
- Flutter端配置：在Flutter代码中初始化通道，例如对于MethodChannel：

const platform = MethodChannel('com.example/sensor_channel');

- **原生端配置**：
    - **Android**：在`android/src/main/kotlin/`目录下（根据插件创建时的语言设置），使用`MethodChannel`类来接收Flutter端的调用并返回数据。例如：

class SensorPlugin : FlutterPlugin {
    private lateinit var channel: MethodChannel
    override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) {
        channel = MethodChannel(binding.binaryMessenger, "com.example/sensor_channel")
        channel.setMethodCallHandler { call, result ->
            if (call.method == "getSensorData") {
                // 调用原生传感器获取数据并返回
                val sensorData = getSensorData()
                result.success(sensorData)
            } else {
                result.notImplemented()
            }
        }
    }
    private fun getSensorData(): String {
        // 实际获取传感器数据的逻辑
        return "sensor value"
    }
    override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {
        channel.setMethodCallHandler(null)
    }
}

    - **iOS**：在`ios/Classes`目录下，使用`FlutterMethodChannel`类来处理Flutter端的调用。例如：

#import "SensorPlugin.h"
@implementation SensorPlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
    FlutterMethodChannel* channel = [FlutterMethodChannel
        methodChannelWithName:@"com.example/sensor_channel"
              binaryMessenger:[registrar messenger]];
    SensorPlugin* instance = [[SensorPlugin alloc] init];
    [registrar addMethodCallDelegate:instance channel:channel];
}
- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
    if ([@"getSensorData" isEqualToString:call.method]) {
        // 调用原生传感器获取数据并返回
        NSString* sensorData = [self getSensorData];
        result(sensorData);
    } else {
        result(FlutterMethodNotImplemented);
    }
}
- (NSString*)getSensorData {
    // 实际获取传感器数据的逻辑
    return @"sensor value";
}
@end

Widget如何响应数据变化
- 使用StatefulWidget：因为传感器数据实时变化，自定义Widget应使用StatefulWidget。
- 在initState中获取数据：在State类的initState方法中通过平台通道获取初始数据，并启动EventChannel监听（如果使用EventChannel接收实时数据）。

class SensorWidget extends StatefulWidget {
    @override
    _SensorWidgetState createState() => _SensorWidgetState();
}
class _SensorWidgetState extends State<SensorWidget> {
    String _sensorData = 'Loading...';
    @override
    void initState() {
        super.initState();
        _getSensorData();
    }
    Future<void> _getSensorData() async {
        try {
            final String data = await platform.invokeMethod('getSensorData');
            setState(() {
                _sensorData = data;
            });
        } on PlatformException catch (e) {
            setState(() {
                _sensorData = "Error: ${e.message}";
            });
        }
    }
    @override
    Widget build(BuildContext context) {
        return Text(_sensorData);
    }
}

- **更新UI**：当通过平台通道获取到新数据时，调用`setState`方法更新Widget的UI，以展示最新的传感器数据。如果使用`EventChannel`，在事件监听器中获取新数据并调用`setState`。例如：

@override
void initState() {
    super.initState();
    final eventChannel = EventChannel('com.example/sensor_event_channel');
    eventChannel.receiveBroadcastStream().listen(
        (data) {
            setState(() {
                _sensorData = data.toString();
            });
        },
        onError: (error) {
            setState(() {
                _sensorData = "Error: ${error.toString()}";
            });
        }
    );
}

星途面试题库

面试题：Flutter自定义Widget与平台交互及深度定制

知识考点

面试题答案