大家好,今天来为大家解答手机上传网站源码分享软件这个问题的一些问题点,包括手机网站程序源码也一样很多人还不知道,因此呢,今天就来为大家分析分析,现在让我们一起来看看吧!如果解决了您的问题,还望您关注下本站哦,谢谢~
让我们探索如何将Flutter视图添加到iOS原生视图(如UIViewController)中。
今天,我们将在iOS中实现一个简单的演示应用程序,它将有两个Flutter页面,在第一个页面上,我们将显示用户列表,第二个屏幕将是用户详细信息屏幕。
我们将把Flutter模块作为包库嵌入到我们的原生iOS应用程序中。
为了便于理解,我将文章分为4个逻辑步骤。
创建Flutter模块从模块生成iOS框架将框架集成和嵌入到本机应用程序中作为UIViewController打开颤动视图
好吧,让我们开始吧!
1.创建一个Flutter模块
首先,如果您尚未在系统上安装FlutterSDK,那么现在是安装的好时机。继续并按照此链接查找在您的机器上设置颤振的说明。
可以了,好了?伟大的!!!
让我们首先从现有的Flutter项目创建Flutter模块。
从命令行界面,导航到您希望在Flutter项目中保存Flutter模块的目录,然后使用FlutterCLI工具运行以下命令:
fluttercreate-templatemodule–orgcom.demoflutter_lib
此命令将创建一个带有.android和.ios隐藏文件夹的颤振模块。这些文件夹是自动生成的,因此不要进行任何更改。
然后在flutter_lib目录下运行flutterpubget。
我们完成了设置。现在让我们在模块的main.dart中添加一个屏幕。
我们不打算介绍Flutter的实现。
这是我们的颤振模块应用程序。完整的源代码可在GitHub上找到。您可以将其从此处复制到您的dart文件中。
最后,我们将拥有一个像下面这样的应用程序。
2.从模块生成iOS框架
现在,让我们开始将Flutter模块集成到我们的原生iOS应用程序中。
在flutter_lib/lib中的main.dart文件中,我们已经定义了从Native模块调用的入口点函数。
入口点函数是这样的,
@pragma(&34;)\nvoidnativeLoad()async{\nWidgetsFlutterBinding.ensureInitialized();\nrunApp(MyApp());\n}
此函数将从iOS应用程序调用。因此,调用此函数时启动的任何View都将集成到iOS应用程序中。我们将在下面进一步看到它的使用。
现在让我们从Flutter模块生成iOS框架。
根据Flutter文档,我们有很多方法可以创建iOS框架并将其嵌入到原生项目中,但这里我们将使用其第二个选项,即Xcode中的Embedframeworks。
让我们首先生成一个iOS框架。从flutter_lib目录运行此命令。
flutterbuildios-framework
它将创建3个单独的框架目录,如下所示。
some/path/MyApp/flutter_lib/build/ios\n└──Flutter/\n├──Debug/\n│├──Flutter.xcframework\n│├──App.xcframework\n│├──FlutterPluginRegistrant.xcframework(onlyifyouhavepluginswithiOSplatformcode)\n│└──example_plugin.xcframework(eachpluginisaseparateframework)\n├──Profile/\n│├──Flutter.xcframework\n│├──App.xcframework\n│├──FlutterPluginRegistrant.xcframework\n│└──example_plugin.xcframework\n└──Release/\n├──Flutter.xcframework\n├──App.xcframework\n├──FlutterPluginRegistrant.xcframework\n└──example_plugin.xcframework
如果您只想生成特定的单一构建类型,那么它也是可能的。
假设我们只想为调试应用程序生成一个框架,那么命令将是这样的,
flutterbuildios-framework–no-release–no-profile
或者
flutterbuildios-framework–debug
完毕?现在,让我们继续吧。
3.将框架集成并嵌入到原生应用程序中
生成的动态框架必须嵌入到您的应用程序中才能在运行时加载。
我们只需将框架拖放到iOS项目的根目录中即可嵌入框架。
它看起来像这样,
现在我们必须检查所有添加的框架是否都嵌入到项目中。
为此,导航到目标的BuildSettings>General>Frameworks、Libraries和EmbeddedContent部分,然后从下拉列表中选择Embed&Sign以添加框架。
但是,这还不够,我们还必须给出添加框架目录的搜索路径。
在目标的构建设置中,将“$(SRCROOT)/Debug”添加到框架搜索路径(FRAMEWORK_SEARCH_PATHS),或者您可以简单地将目录拖放到该选项的值部分。
而已。您现在应该能够构建项目而不会出现任何错误。
4.打开flutterview为UIViewController
要从现有的iOS启动Flutter屏幕,我们必须使用FlutterEngine和FlutterViewController类。
根据FlutterDoc,-
FlutterEngine充当DartVM和Flutter运行时的宿主,FlutterViewController附加到FlutterEngine以将UIKit输入事件传递给Flutter并显示由FlutterEngine渲染的帧。
让我们首先在主viewController中添加一个简单的按钮,这样我们就可以通过单击该按钮来打开Flutter视图。
现在让我们看看如何打开颤振视图。
a。创建FlutterEngine
让我们首先修改AppDelegate.swift文件以进行所需的更改。
importUIKit\nimportFlutter\n\n//Usedtoconnectplugins(onlyifyouhavepluginswithiOSplatformcode).\n//importFlutterPluginRegistrant\n\n@UIApplicationMain\nclassAppDelegate:FlutterAppDelegate{//MoreontheFlutterAppDelegate.\nlazyvarflutterEngine=FlutterEngine(name:&34;)\n\noverridefuncapplication(_application:UIApplication,didFinishLaunchingWithOptionslaunchOptions:[UIApplication.LaunchOptionsKey:Any]?)->Bool{\n//RunsthedefaultDartentrypointwithadefaultFlutterroute.\nflutterEngine.run(withEntrypoint:&34;,libraryURI:&34;)\n//Usedtoconnectplugins(onlyifyouhavepluginswithiOSplatformcode).\n//GeneratedPluginRegistrant.register(with:self.flutterEngine);\nreturnsuper.application(application,didFinishLaunchingWithOptions:launchOptions);\n}\n}
在这里,我们做了以下更改——
根据Flutter的要求,我们必须遵守AppDelegate类中的FlutterAppDelegate协议。之后,我们创建了一个FlutterEngine类的实例,name参数可以是任何你喜欢的!在这个项目中,我们只打开了一个Flutter视图,因此我们只添加了一个FlutterEngine,但是如果您必须打开多个Flutter视图,则必须相应地创建单独的引擎。之后,我们添加了一个flutterrun语句,这里用于参数-withEntrypoint:我们必须传递我们在flutter模块的main.dart文件中配置的entryPoint函数名称。libraryURI:传递模块的dart文件路径。否则,它只会打开一个空的模糊屏幕。
我们必须使用package:关键字来传递dart文件位置,否则在少数情况下将无法正常工作。
b。作为UIViewController打开Flutter视图
现在我们只需要通过点击给定的登录按钮来打开颤振视图。
让我们使用Login按钮的@IBAction并添加代码以在其块中打开Flutter视图,因此我们的ViewController将如下所示,
importUIKit\nimportFlutter\n\nclassViewController:UIViewController{\n\n@IBOutletweakvarloginButton:UIButton!\n\noverridefuncviewDidLoad(){\nsuper.viewDidLoad()\nloginButton.layer.cornerRadius=loginButton.frame.height/2\n}\n\n@IBActionfunconLoginBtnClick(_sender:UIButton){\nletflutterEngine=(UIApplication.shared.delegateas!AppDelegate).flutterEngine\nletflutterViewController=FlutterViewController(engine:flutterEngine,nibName:nil,bundle:nil)\npresent(flutterViewController,animated:true,completion:nil)\n}\n}
很容易理解,不是吗?
它只是从AppDelegate类中获取Flutter引擎的对象,并使用它通过FlutterViewController打开视图。
而已。现在您可以运行应用程序了!
关注七爪网,获取更多APP/小程序/网站源码资源!
关于手机上传网站源码分享软件,手机网站程序源码的介绍到此结束,希望对大家有所帮助。
