皮皮网

1.使用 .NET MAUI 创建底部表单
2.Android 原生BottomSheet 介绍及坑

使用 .NET MAUI 创建底部表单

       本文将介绍在.NET MAUI中创建底部表单的方法，包括实现方案与实例展示。

       底部表单是常用于展示补充内容的界面元素，它固定于屏幕底部，便于用户在浏览页面时查看信息。ros源码解析本文旨在提供不同于以往基于AbsoluteLayout或Grid实现的casin源码方案，通过使用本地控件来优化体验。

       首先，创建一个名为PageExtensions的新类，用于实现底部表单的通用功能。对于Android平台，选择BottomSheetDialog作为基类，这是unitypackage源码一个适用于底部表样式的对话框，能提供良好的用户体验。

       在Android的Platforms\\\\Android文件夹中，新建PageExtensions类，编写代码以集成BottomSheetDialog功能。taro源码该类需定义如何生成底部表单的内容，包括布局和显示方式。

       对于iOS/MacCatalyst平台，利用UISheetPresentationController作为管理表单外观和行为的pvbrowser源码演示控制器。此控制器自iOS 版本开始可用，提供更多自定义选项，如大小、背景调暗和用户交互等。

       在iOS或MacCatalyst的Platforms文件夹中创建PageExtensions类，实现与Android类似的集成逻辑，确保兼容性和自定义性。

       为了展示底部表单的使用，可以在任何页面中调用PageExtensions类的显示方法。需要实现GetMyBottomSheetContent函数，以返回用于在底部表单中展示的视图。

       完成集成后，您的应用程序将具备一个简洁且交互流畅的底部表单功能，能够有效提升用户体验。

       完整代码示例和详细的实现步骤可以参考GitHub上的相关项目。

       希望本文能够帮助您在.NET MAUI中轻松创建并使用底部表单，让您的应用设计更加丰富和实用。

Android 原生BottomSheet 介绍及坑

       Android Support Library .2 推出之后，增加了几个功能，例如支持Vector Drawables 和Animated Vector Drawables；增加AppCompat DayNight 主题；Design 库中增加Bottom Sheets，RecyclerView 支持 auto-measurement，之前的wrap_content ,match_parent 都将可以发挥作用等等

        公司的App 之前使用过第三方的[BottomSheet] （ /BottomSheet ），现在Android 有自己的BottomSheet 那还不赶紧换成原生的。然而好事多磨，Android 原生BottomSheet 资料太少，深研下去发现BottomSheet 就是个大坑！

        BottomSheet 使用需要CoordinatorLayout作为父布局，BottomSheet 的布局作为CoordinatorLayout 的子布局，并且BottomSheetBehavior（比如加上app:layout_behavior=”android.support.design.widget.BottomSheetBehavior”）

        实际使用过程中主要依靠BottomSheetBehavior来控制BottomSheet的展示及回调。

        BottomSheetBehavior 具有五种状态：

        设置状态：

        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

        回调：

        强调：

        BottomSheetBehavior将能帮你实现 常驻bottom sheet（ persistent bottom sheet） 的场景, 但这个版本还提供了BottomSheetDialog 和 BottomSheetDialogFragment 来实现 modal bottom sheets 的场景。只需要将AppCompatDialog 或者AppCompatDialogFragment分别替换成上述的两个控件，你就拥有了 bottom sheet 风格的对话框

        然而我们实际我们需要BottomSheetDialog 是展开的，而BottomSheetDialog只展示一部分

        原因：BottomSheetDialog默认是STATE_COLLAPSED，所有BottomSheetDialog 依靠peekHight来设置高度，系统BottomSheetDialog 默认高度为dp（查源码得知）,那按理来说我们的BottomSheetDialog 高度该是dp，但是我们实际发现BottomSheetDialog高度也不等于dp。我们研究下BottomSheetBehavior的中控制BottomSheetDialog高度源码:

        通过源码我们可以得知BottomSheetBehavior通过改变child的偏移量而控制BottomSheetDialog的高度，默认状态为STATE_COLLAPSED,child向下移动mMaxOffset高度，从而控制child显示高度为mPeekHeight,这就需要child与parent 顶部对齐，child的getTop 为0；

        然而我们再去查看Android的BottomSheetDialog 内中布局R.layout.design_bottom_sheet_dialog,发现我们自定义的的BottomSheetDialog 的contentView 是放置在FrameLayout 中的，然而FrameLayout出于某些原因为垂直居中的，而不是顶部对齐，从而导致BottomSheetDialog在dp的基础上向下偏移,只展示一部分。

        所以我们可以通过下面方法解决BottomSheetDialog 的显示问题

        解决方法如下：

        当我们设置bottomSheetDialog每次点击后不new,而是直接show的话，然而当我们会bottomSheetDialog 展开后，我们将BottomSheetDialog划下隐藏后， 再点击展示BottomSheetDialog后，会发现页面只是变暗，BottomsheetDialog未展开，这是由于之前我们划下收缩隐藏BottomSheetDialog后，bottomSheetDialogBehavior的状态为隐藏，再次show之后，系统未恢复bottomSheetDialogBehavior的状态，还是隐藏，所以再次点击后页面只是变暗。