在 NativeScript 中显示 PopOver

Posted 2023-03-14

【中文标题】在 NativeScript 中显示 PopOver

【英文标题】：Display PopOver in NativeScript

【发布时间】：2016-04-25 22:05:50

【问题描述】：

我一直致力于让 UIPrinterPicker 使用 NativeScript 在 iPad 上显示。我从其他人那里得到了一些很大的帮助。

我现在遇到的问题是 UIPrinterPicker PopOver 在 iPad 上无法正确显示。如图所示，时间下方的白条是 PopOver。我没有应用任何 CSS，也没有找到任何关于在 NativeScript 中设置 PopOver 样式的文档。

注意：我可以让 UIPrinterPicker 在 iPhone 上显示，因为它不需要在 PopOver 中打开。

下面是页面的相关代码：

var frames = require("ui/frame");
var view;

function pageLoaded(args) 
    var page = args.object;
    view = page.ios;

exports.pageLoaded = pageLoaded;

function selectPrinter() 
    var runningOniPad = (UIDevice.currentDevice().userInterfaceIdiom == UIUserInterfaceIdiomPad);
    var printPicker = UIPrinterPickerController.printerPickerControllerWithInitiallySelectedPrinter(null);
    var completionHandler = function(printerPicker, userDidSelect, error) 
                                if (error != null) 
                                    console.log("error: " + error);
                                
                                global.selectedPrinter = printerPicker.selectedPrinter;
                                console.log("selectedPrinter: " + global.selectedPrinter);
                            ;
    if ( ! runningOniPad) 
        printPicker.presentAnimatedCompletionHandler(false, completionHandler);
     else 
        printPicker.presentFromRectInViewAnimatedCompletionHandler(view.view.frame, view.view, false, completionHandler);
    


exports.selectPrinter = selectPrinter;

下面是 UI XML：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
    <GridLayout columns="*" rows="*" horizontalAlignment="center" verticalAlignment="center" >
        <StackLayout id="myStackLayout">
            <Button text="Select Printer" tap="selectPrinter" />
        </StackLayout>
    </GridLayout>
</Page>

有没有办法正确显示 PopOver？

【参考方案1】：

我已经测试了你的案例，我在 iPad 下展示 PopOver 的方法是使用 initWithFrame 创建一个自定义视图，如下所示：

else 

    var makeView = UIView.alloc().initWithFrame(origin: x:0, y:0, size: width: 400, height: 600  );

    printPicker.presentFromRectInViewAnimatedCompletionHandler(makeView.frame, view.view, false, completionHandler);

您可以以原生方式进一步自定义新视图。 万一您想知道如何使自定义视图的位置相对，您可以使用这样的东西

var makeView = UIView.alloc().initWithFrame(
    origin:  x: view.view.frame.origin.x, 
              y: view.view.frame.origin.y , 
    size:  width: view.view.bounds.size.width/2, 
            height: view.view.bounds.size.height/2  
);

我强烈建议您对变量 view 使用不同的词，以避免在阅读诸如 view.view

之类的内容时产生混淆

【讨论】：

谢谢尼克！感谢您的帮助，并同意变量命名可以进行一些清理。

是的 - 我自己在测试期间掉进了那个陷阱，想知道这个视图和 view.view 命名:)