iOS 原生应用中如何实现随内容自动调整大小的 Flutter 视图【免费下载链接】samplesA collection of Flutter examples and demos项目地址: https://gitcode.com/GitHub_Trending/sam/samples如果你要把一个 Flutter 模块嵌入现有 iOS 应用但又不想给视图写死高度——比如 Flutter 侧是一个会不断增长或减少的列表希望宿主 UIView 能跟着内容自动伸缩——那么 Flutter samples 仓库中的ios_content_resizing示例直接演示了这条路径在一个 UIKit 宿主应用中嵌入一个可自调整大小的 Flutter 视图。当 Flutter 侧的条目增加时承载它的 UIView 会自动调整intrinsicContentSize来匹配新的内容尺寸。示例位于 add_to_app/ios_content_resizing结构分两部分flutter_module/以 Flutter 模块形式编写的 UI包含一个可增长的文本列和一个 “Add to list” 按钮ios_content_resizing/原生 UIKit 宿主工程用一个可滚动的卡片列表UIScrollViewUIStackView承载这个 Flutter 视图。准备条件文档列出的环境要求是FlutteriOSXcode、Cocoapods本仓库的 iOS 示例依赖最新版本的 Cocoapods。如果还没装add_to_app文档给出的安装方式是在 macOS 上执行该命令会安装系统级 gem需要管理员权限sudo gem install cocoapods另外注意README 的快速启动脚本假设你同时安装好了 iOS 和 Android 两套工具链脚本本身只用到了 iOS 侧但文档明确写了这一前提。配置 CocoaPods 引入 Flutter 模块原生工程通过 Podfile 把 Flutter 模块接进来。示例的 Podfile 关键部分如下flutter_application_path ../flutter_module load File.join(flutter_application_path, .ios, Flutter, podhelper.rb) target ios_content_resizing do use_frameworks! install_all_flutter_pods(flutter_application_path) target ios_content_resizingTests do inherit! :search_paths end target ios_content_resizingUITests do end end post_install do |installer| flutter_post_install(installer) if defined?(flutter_post_install) end其中flutter_application_path指向与原生工程平级的flutter_module目录podhelper.rb从该模块的.ios/Flutter目录加载install_all_flutter_pods负责安装 Flutter 相关的 Pods。迁移到自己项目时需要把路径改成你实际的模块位置其余结构保持一致。拉取依赖并运行README 给出的最短路径命令在示例根目录add_to_app/ios_content_resizing下执行cd flutter_module/ flutter pub get cd ../ios_content_resizing pod install open ios_content_resizing.xcworkspace然后在 Xcode 中点击 “Run”把应用启动到模拟器或真机上。README 明确说明用.xcworkspace而不是.xcodeproj打开因为依赖是通过 CocoaPods 管理的。原生侧让 Flutter 视图随内容伸缩核心代码在 ViewController.swift。创建 Flutter 视图并启用自动调整大小的关键几行是let engine FlutterEngine() engine.run() let flutterViewController FlutterViewController(engine: engine, nibName: nil, bundle: nil) flutterViewController.isAutoResizable true addChild(flutterViewController)isAutoResizable true是让视图随内容自动调整大小的一行开关。之后示例把这个视图嵌进一个卡片容器flutterViewController.view.backgroundColor .clear flutterViewController.view.translatesAutoresizingMaskIntoConstraints false cardView.addSubview(flutterViewController.view) NSLayoutConstraint.activate([ flutterViewController.view.topAnchor.constraint(equalTo: cardView.topAnchor), flutterViewController.view.leadingAnchor.constraint(equalTo: cardView.leadingAnchor), flutterViewController.view.trailingAnchor.constraint(equalTo: cardView.trailingAnchor), flutterViewController.view.bottomAnchor.constraint(equalTo: cardView.bottomAnchor) ])注意约束是四边全定的Flutter 视图完全由卡片撑开而卡片放进UIStackView后再放进UIScrollView。视图高度一旦随内容变化stack view 和滚动内容会跟着重排后续的原生UILabel卡片就被推到下方。其余代码50 个原生 label 卡片、safe area 约束是布局脚手架与自动调整大小机制本身无关。Flutter 侧内容高度要由内容决定模块入口 main.dart 的界面是一个Column条目数由_counter控制点击 “Add to list” 递增超过 40 后重置为 1return Center( heightFactor: 1, child: Directionality( textDirection: TextDirection.ltr, child: Column( mainAxisAlignment: MainAxisAlignment.end, children: [ for (int i 0; i _counter; i) Text( Hello from Flutter $i, style: TextStyle(color: Colors.pink), ), Padding( padding: const EdgeInsets.fromLTRB(8.0, 50, 8.0, 8.0), child: ElevatedButton( onPressed: _incrementCounter, child: Text(Add to list), ), ), ], ), ), );示例用Center(heightFactor: 1)包裹Column使视图高度跟随列的实际内容高度条目增加时内容变高原生宿主侧的intrinsicContentSize随之调整这正是 README 描述的行为。如果你的 Flutter 界面根节点是固定高度或无限高度例如自己套了一层全屏滚动视图这个联动就不会成立——模块侧的布局要保证“高度由内容决定”。验证与调试在 Xcode 里 Run 后应用启动在 Simulator 或真机上README 给出的成功路径。页面上第一张卡片是 Flutter 视图里面是粉色 “Hello from Flutter” 文本和 “Add to list” 按钮其余卡片是原生 label。点击 “Add to list” 每加一条Flutter 卡片应变高并把下方的原生卡片往下顶_counter超过 40 后回到 1卡片随之收缩可以双向观察自适应行为。需要调试 Flutter 模块时add_to_app文档说明可以对正在运行的宿主应用执行flutter attach之后可以热重载、打断点、使用 DevTools和完整 Flutter 应用类似。限制与延伸该示例只覆盖 iOS 宿主add_to_app目录下的 Android 视图级集成对应的是android_view示例两者的嵌入方式不同不要直接照搬。示例中 AppDelegate.swift 还预创建了一个名为my_flutter_engine的FlutterEngine用于预热而 ViewController 内部又自行创建并运行了一个引擎如果你在自己项目里复用预热的引擎给FlutterViewController需要自行保持一致示例代码展示的是后者路径。遇到示例本身的问题README 指引到 add_to_app/README.md 继续排查该文档还汇总了 add-to-app 各示例的目标与调试方式。【免费下载链接】samplesA collection of Flutter examples and demos项目地址: https://gitcode.com/GitHub_Trending/sam/samples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 iOS 原生应用中如何实现随内容自动调整大小的 Flutter 视图
iOS 原生应用中如何实现随内容自动调整大小的 Flutter 视图【免费下载链接】samplesA collection of Flutter examples and demos项目地址: https://gitcode.com/GitHub_Trending/sam/samples如果你要把一个 Flutter 模块嵌入现有 iOS 应用但又不想给视图写死高度——比如 Flutter 侧是一个会不断增长或减少的列表希望宿主 UIView 能跟着内容自动伸缩——那么 Flutter samples 仓库中的ios_content_resizing示例直接演示了这条路径在一个 UIKit 宿主应用中嵌入一个可自调整大小的 Flutter 视图。当 Flutter 侧的条目增加时承载它的 UIView 会自动调整intrinsicContentSize来匹配新的内容尺寸。示例位于 add_to_app/ios_content_resizing结构分两部分flutter_module/以 Flutter 模块形式编写的 UI包含一个可增长的文本列和一个 “Add to list” 按钮ios_content_resizing/原生 UIKit 宿主工程用一个可滚动的卡片列表UIScrollViewUIStackView承载这个 Flutter 视图。准备条件文档列出的环境要求是FlutteriOSXcode、Cocoapods本仓库的 iOS 示例依赖最新版本的 Cocoapods。如果还没装add_to_app文档给出的安装方式是在 macOS 上执行该命令会安装系统级 gem需要管理员权限sudo gem install cocoapods另外注意README 的快速启动脚本假设你同时安装好了 iOS 和 Android 两套工具链脚本本身只用到了 iOS 侧但文档明确写了这一前提。配置 CocoaPods 引入 Flutter 模块原生工程通过 Podfile 把 Flutter 模块接进来。示例的 Podfile 关键部分如下flutter_application_path ../flutter_module load File.join(flutter_application_path, .ios, Flutter, podhelper.rb) target ios_content_resizing do use_frameworks! install_all_flutter_pods(flutter_application_path) target ios_content_resizingTests do inherit! :search_paths end target ios_content_resizingUITests do end end post_install do |installer| flutter_post_install(installer) if defined?(flutter_post_install) end其中flutter_application_path指向与原生工程平级的flutter_module目录podhelper.rb从该模块的.ios/Flutter目录加载install_all_flutter_pods负责安装 Flutter 相关的 Pods。迁移到自己项目时需要把路径改成你实际的模块位置其余结构保持一致。拉取依赖并运行README 给出的最短路径命令在示例根目录add_to_app/ios_content_resizing下执行cd flutter_module/ flutter pub get cd ../ios_content_resizing pod install open ios_content_resizing.xcworkspace然后在 Xcode 中点击 “Run”把应用启动到模拟器或真机上。README 明确说明用.xcworkspace而不是.xcodeproj打开因为依赖是通过 CocoaPods 管理的。原生侧让 Flutter 视图随内容伸缩核心代码在 ViewController.swift。创建 Flutter 视图并启用自动调整大小的关键几行是let engine FlutterEngine() engine.run() let flutterViewController FlutterViewController(engine: engine, nibName: nil, bundle: nil) flutterViewController.isAutoResizable true addChild(flutterViewController)isAutoResizable true是让视图随内容自动调整大小的一行开关。之后示例把这个视图嵌进一个卡片容器flutterViewController.view.backgroundColor .clear flutterViewController.view.translatesAutoresizingMaskIntoConstraints false cardView.addSubview(flutterViewController.view) NSLayoutConstraint.activate([ flutterViewController.view.topAnchor.constraint(equalTo: cardView.topAnchor), flutterViewController.view.leadingAnchor.constraint(equalTo: cardView.leadingAnchor), flutterViewController.view.trailingAnchor.constraint(equalTo: cardView.trailingAnchor), flutterViewController.view.bottomAnchor.constraint(equalTo: cardView.bottomAnchor) ])注意约束是四边全定的Flutter 视图完全由卡片撑开而卡片放进UIStackView后再放进UIScrollView。视图高度一旦随内容变化stack view 和滚动内容会跟着重排后续的原生UILabel卡片就被推到下方。其余代码50 个原生 label 卡片、safe area 约束是布局脚手架与自动调整大小机制本身无关。Flutter 侧内容高度要由内容决定模块入口 main.dart 的界面是一个Column条目数由_counter控制点击 “Add to list” 递增超过 40 后重置为 1return Center( heightFactor: 1, child: Directionality( textDirection: TextDirection.ltr, child: Column( mainAxisAlignment: MainAxisAlignment.end, children: [ for (int i 0; i _counter; i) Text( Hello from Flutter $i, style: TextStyle(color: Colors.pink), ), Padding( padding: const EdgeInsets.fromLTRB(8.0, 50, 8.0, 8.0), child: ElevatedButton( onPressed: _incrementCounter, child: Text(Add to list), ), ), ], ), ), );示例用Center(heightFactor: 1)包裹Column使视图高度跟随列的实际内容高度条目增加时内容变高原生宿主侧的intrinsicContentSize随之调整这正是 README 描述的行为。如果你的 Flutter 界面根节点是固定高度或无限高度例如自己套了一层全屏滚动视图这个联动就不会成立——模块侧的布局要保证“高度由内容决定”。验证与调试在 Xcode 里 Run 后应用启动在 Simulator 或真机上README 给出的成功路径。页面上第一张卡片是 Flutter 视图里面是粉色 “Hello from Flutter” 文本和 “Add to list” 按钮其余卡片是原生 label。点击 “Add to list” 每加一条Flutter 卡片应变高并把下方的原生卡片往下顶_counter超过 40 后回到 1卡片随之收缩可以双向观察自适应行为。需要调试 Flutter 模块时add_to_app文档说明可以对正在运行的宿主应用执行flutter attach之后可以热重载、打断点、使用 DevTools和完整 Flutter 应用类似。限制与延伸该示例只覆盖 iOS 宿主add_to_app目录下的 Android 视图级集成对应的是android_view示例两者的嵌入方式不同不要直接照搬。示例中 AppDelegate.swift 还预创建了一个名为my_flutter_engine的FlutterEngine用于预热而 ViewController 内部又自行创建并运行了一个引擎如果你在自己项目里复用预热的引擎给FlutterViewController需要自行保持一致示例代码展示的是后者路径。遇到示例本身的问题README 指引到 add_to_app/README.md 继续排查该文档还汇总了 add-to-app 各示例的目标与调试方式。【免费下载链接】samplesA collection of Flutter examples and demos项目地址: https://gitcode.com/GitHub_Trending/sam/samples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考