Flutter中Add to Wallet按钮位置失控问题求助

问题描述 #

我在Flutter中尝试展示Add to Wallet按钮，已完成原生代码编写、MethodChannel配置和显示逻辑，但按钮始终固定在AppBar区域，无法放置到指定位置（比如文本下方），相关代码如下：

用户原代码 #

iOS AppDelegate及WalletMethods代码 #

import PassKit

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
            let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
            let channel = FlutterMethodChannel(name: "your_wallet_channel", binaryMessenger: controller.binaryMessenger)
            channel.setMethodCallHandler { (call: FlutterMethodCall, result: @escaping FlutterResult) in
                if call.method == "showAddToWalletButton" {
                    WalletMethods.showAddToWalletButton()
                } else {
                    result(FlutterMethodNotImplemented)
                }
            }
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

class WalletMethods {
    static func showAddToWalletButton() {
        let passButton = PKAddPassButton(addPassButtonStyle: .black)

        passButton.frame = CGRect(x: 20, y: 20, width: 200, height: 44)

        passButton.addTarget(self, action: #selector(addToWalletButtonTapped), for: .touchUpInside)

        let controller = UIApplication.shared.keyWindow?.rootViewController
        controller?.view.addSubview(passButton)
    }

    @objc private func addToWalletButtonTapped() {
        
    }
}

Flutter MethodChannel代码 #

class WalletChannel {
  static const MethodChannel _channel = MethodChannel('your_wallet_channel');

  static Future<void> showAddToWalletButton() async {
    await _channel.invokeMethod('showAddToWalletButton');
  }
}

Flutter页面代码 #

class _WalletScreenState extends State<WalletScreen> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      showAddToWalletButton();
    });
  }

  void showAddToWalletButton() {
    WalletChannel.showAddToWalletButton();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Wallet Screen')),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Welcome to Your Wallet'),
          SizedBox(height: 20),
          Text('This is your digital wallet.'),
          SizedBox(height: 20),
          Text('Manage your cards and passes.'),
          SizedBox(height: 40),
        ],
      ),
    );
  }
}

问题原因 #

原代码直接将PKAddPassButton添加到FlutterViewController的根视图上，设置的frame坐标是相对于整个屏幕的，而Flutter的页面内容（Scaffold的body）位于AppBar下方，因此固定的y:20会让按钮出现在AppBar区域附近。同时这种方式无法和Flutter的布局系统联动，无法响应布局变化（如屏幕旋转、滚动）。

解决方案：使用PlatformView嵌入原生按钮 #

通过Flutter的UiKitView（iOS端）将原生PKAddPassButton封装为Flutter Widget，完全融入Flutter布局系统，实现精准控制位置。

步骤1：修改iOS端代码，创建PlatformView #

1.1 实现FlutterPlatformView封装PKAddPassButton

import PassKit
import Flutter

class AddToWalletView: NSObject, FlutterPlatformView {
    private let view: PKAddPassButton
    
    init(frame: CGRect, viewIdentifier: Int64, arguments: Any?, binaryMessenger: FlutterBinaryMessenger) {
        self.view = PKAddPassButton(addPassButtonStyle: .black)
        super.init()
        setupView(frame: frame)
    }
    
    private func setupView(frame: CGRect) {
        view.frame = frame
        view.addTarget(self, action: #selector(addToWalletTapped), for: .touchUpInside)
    }
    
    func view() -> UIView {
        return view
    }
    
    @objc private func addToWalletTapped() {
        // 在这里实现添加Pass到钱包的逻辑
        // 示例：可以通过MethodChannel通知Flutter处理，或者直接在原生完成逻辑
    }
}

1.2 创建PlatformView工厂类

class AddToWalletViewFactory: NSObject, FlutterPlatformViewFactory {
    private let binaryMessenger: FlutterBinaryMessenger
    
    init(binaryMessenger: FlutterBinaryMessenger) {
        self.binaryMessenger = binaryMessenger
        super.init()
    }
    
    func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> FlutterPlatformView {
        return AddToWalletView(frame: frame, viewIdentifier: viewId, arguments: args, binaryMessenger: binaryMessenger)
    }
    
    func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol {
        return FlutterStandardMessageCodec.sharedInstance()
    }
}

1.3 在AppDelegate中注册PlatformView

修改AppDelegate的didFinishLaunchingWithOptions方法，添加PlatformView注册逻辑：

override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
    
    // 注册Add to Wallet按钮的PlatformView
    let registrar = controller.registrar(forPlugin: "AddToWalletPlugin")!
    let factory = AddToWalletViewFactory(binaryMessenger: registrar.messenger())
    registrar.register(factory, withId: "addToWalletButton")
    
    // 保留原有的MethodChannel（如果需要其他原生交互）
    let channel = FlutterMethodChannel(name: "your_wallet_channel", binaryMessenger: controller.binaryMessenger)
    channel.setMethodCallHandler { (call: FlutterMethodCall, result: @escaping FlutterResult) in
        if call.method == "showAddToWalletButton" {
            // 现在不需要通过这个方法显示按钮，改为Flutter布局中直接使用Widget
            result(nil)
        } else {
            result(FlutterMethodNotImplemented)
        }
    }
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}

步骤2：Flutter端创建对应Widget #

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

class AddToWalletButton extends StatelessWidget {
  final double width;
  final double height;

  const AddToWalletButton({
    super.key,
    this.width = 200,
    this.height = 44,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      height: height,
      child: UiKitView(
        viewType: 'addToWalletButton', // 与原生注册的ID一致
        creationParams: {},
        creationParamsCodec: const StandardMessageCodec(),
      ),
    );
  }
}

步骤3：在Flutter页面中使用该Widget #

修改页面的build方法，将AddToWalletButton放到指定位置：

class _WalletScreenState extends State<WalletScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Wallet Screen')),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Welcome to Your Wallet'),
          const SizedBox(height: 20),
          const Text('This is your digital wallet.'),
          const SizedBox(height: 20),
          const Text('Manage your cards and passes.'),
          const SizedBox(height: 40),
          // 将按钮放置在文本下方
          const AddToWalletButton(),
        ],
      ),
    );
  }
}

方案优势 #

• 按钮位置完全由Flutter布局系统控制，支持居中、间距、响应式适配等所有Flutter布局特性
• 原生按钮与Flutter页面元素联动，能响应屏幕旋转、滚动等布局变化
• 代码结构更符合Flutter与原生交互的规范

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