android - 如何在 Jetpack Compose Material 3 中制作 cradl

我正在尝试使用 Jetpack Compose Material 3 制作 Cradled FAB。基于本网站文档中的图像:https://m3.material.io/components/bottom-app-bar/implementation

但是在代码中我找不到任何关于在何处指定 anchor 位置或将晶圆厂设置为停靠的信息。示例代码是 XML,我使用的是 Compose。这是怎么做到的?我现在正在使用 Scafold 和 BottomAppBar,但它们似乎没有任何选项来停靠、支撑或锚定 float 操作按钮。

最佳答案

我没有使用 Material Compose 库,但最近我在从 Material 2 迁移到 Material 3 时遇到了同样的问题。

https://pasteboard.co/LWzXHPOg3waX.jpg

在我的 BottomAppBar 组件上添加 app:fabAnchorMode="cradle" 属性为我解决了这个问题。

https://pasteboard.co/qmZE2NQovGFq.png

这里是代码示例

 <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MyActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/my_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/my_fab_description"
        android:src="?attr/myFabIcon"
        app:layout_anchor="@+id/my_bottom_app_bar" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/my_bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/global_action_bar_height"
        android:layout_gravity="bottom"
        app:backgroundTint="?attr/myBottomAppBarColor"
        app:fabAlignmentMode="end"
        app:fabAnchorMode="cradle"
        app:fabCradleMargin="@dimen/bottom_action_bar_fab_cradle_margin"
        app:hideOnScroll="true"
        app:menu="@menu/my_bottom_app_bar_menu" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

关于android - 如何在 Jetpack Compose Material 3 中制作 cradled FAB?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73841364/

相关文章:

uml - Pacman Arcade 的用例图

python - pytorch 闪电 "got an unexpected keyword arg

blockchain - 在 remix Ide 中,这个通知是什么意思? "You have no

typescript - 无法在 Apollo GraphQL 中定义自定义标量,TypeScrip

c++ - 用户自定义算子转换解析顺序

android - 在 Jetpack Compose 中使用 Horizo​​ntalPager

prolog - Prolog中的条件写入

swift - Xcode 14 UINavigationBar 问题

typescript - 剧作家API测试: intercept API request

css - 同一元素的文本和背景之间的图层