我正在尝试使用 Jetpack Compose Material 3 制作 Cradled FAB。基于本网站文档中的图像:https://m3.material.io/components/bottom-app-bar/implementation
但是在代码中我找不到任何关于在哪里指定锚点位置或将 fab 设置为停靠的信息。示例代码是 XML,我使用的是 Compose。这是怎么做到的?我现在使用 Scafold 和 BottomAppBar,但它们似乎没有任何选项来停靠或固定或锚定浮动操作按钮。
材料 3 建议将 Floating Action Bar 放在 Bottom Bar 内部,不要被截断。
如果您需要截止,请使用材质 2 组件或创建自定义组件。
如果您更愿意遵循材料 3 指南,请将 FAB 放入栏中,如下所示:
Scaffold(
bottomBar = {
BottomAppBar(
actions = {},
floatingActionButton = {
FloatingActionButton(onClick = { }) {
Icon(Icons.Default.Add, contentDescription = "Add")
}
},
)
}
) {
Text("The content", modifier = Modifier.padding(it))
}
Google 建议将其放置在底部导航栏中。
但要回答你的问题:花了两天时间才弄清楚这一点。事实证明,您可以将 FAB 包裹在
Box
中并使用 Modifier.offset
。据我所知,pointerInput
也是准确的。可能有几种方法可以做到这一点,但这可能远不是最好的。
您可能需要根据屏幕尺寸、底部导航的高度等手动计算您正在寻找的确切偏移量。但这至少是实现对接 FAB 的一种相对简单的方法。
Scaffold(
modifier = Modifier,
floatingActionButton = {
val w = LocalConfiguration.current.screenWidthDp.dp
val h = LocalConfiguration.current.screenHeightDp.dp
val szW = w * ACTION_BTN_SZ_W
val ht = h * ACT_BTN_OFFSET_H
Box(){
FloatingActionButton(
onClick = { /* stub */ },
shape = CircleShape,
modifier = Modifier
.align(Alignment.Center)
.size(80.dp)
.offset(y = 50.dp)
) {
Icon(
imageVector = FontAwesomeIcons.Solid.Plus,
contentDescription = null,
modifier = Modifier.size(45.dp)
)
}
}
},
floatingActionButtonPosition = FabPosition.Center,
content = { Content() },
bottomBar = {
BottomNavWr(
navController,
tabs
)
}
)
根据其他代码生成类似于以下内容的内容:
其中一个选项是使用脚手架,您可以设置“floatingActionButtonPosition”
Scaffold(
bottomBar = { //bottomBar sample },
floatingActionButton = {
//Button
},
floatingActionButtonPosition = FabPosition.Center,
content = {//your content
我没有使用 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>