floating-action-button 相关问题

如何在jetpack compose中在键盘顶部创建FloatingActionButton

如何在键盘顶部创建FloatingActionButton，但如果键盘隐藏，则在屏幕底部创建FloatingActionButton？ 浮动操作按钮( 修饰符 = 修饰符 .p...

可移动扩展浮动操作按钮

我正在使用 ExtendedFloatingActionButton 并使其在屏幕上可移动，但当将其移动到屏幕左侧时，左侧的视图丢失。 这是按钮正在工作的屏幕图像...

如何在 Jetpack Compose 中制作迷你工厂

在 XML 中，我们可以将浮动操作按钮制作为 2 种尺寸（常规尺寸和迷你尺寸），如下所示 在 XML 中，我们可以制作 2 种尺寸的浮动操作按钮（常规尺寸和 mini），如下所示 <com.google.android.material.floatingactionbutton.FloatingActionButton ... app:fabSize="mini"/> 我的问题是如何在Compose中制作迷你工厂，作为FloatingActionButton实现如下（没有尺寸参数） @Composable fun FloatingActionButton( onClick: (() -> Unit)?, modifier: Modifier! = Modifier, interactionSource: MutableInteractionSource! = remember { MutableInteractionSource() }, shape: Shape! = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)), backgroundColor: Color! = MaterialTheme.colors.secondary, contentColor: Color! = contentColorFor(backgroundColor), elevation: FloatingActionButtonElevation! = FloatingActionButtonDefaults.elevation(), content: (@Composable () -> Unit)? ): Unit 如果您的项目中使用了androidx.compose.material3，则可以使用SmallFloatingActionButton @Composable public fun SmallFloatingActionButton( onClick: () → Unit, modifier: Modifier, interactionSource: MutableInteractionSource, shape: Shape, containerColor: Color, contentColor: Color, elevation: FloatingActionButtonElevation, content: @Composable () → Unit ): Unit 正如您在 FAB 实现中所看到的，它设置了默认大小。 如果你想改变FAB的大小，我认为唯一的方法是使用Modifier.size(40.dp)。 FloatingActionButton( modifier = Modifier.size(40.dp), // 40 is a mini-fab onClick = { } ) { Icon(imageVector = Icons.Filled.Add, contentDescription = null) } 在 Compose 中，您现在可以使用材质 3 来使用 SmallFloatingActionButton：示例： @Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Example test") } } 您可以了解更多信息：https://developer.android.com/jetpack/compose/components/fab#small

如何防止 Ionic/React fab 按钮随键盘移动？

我的 App.tsx 文件中有一个 fab 按钮。它覆盖在我的底部选项卡栏的顶部，但实际上不在选项卡栏内部，因为如果我将其放入 IonTab 中，非选项卡按钮似乎会消失。 目前，...

如何在纸张的FAB组件中应用背景渐变？

可以使用 https://github.com/react-native-linear-gradient/react-native-linear-gradient 在论文的 FAB 组件中应用渐变背景吗？ 或者还有其他方法可以应用

如何在 vuetify 3 中创建 fab Button？

在 vuetify 2 中它与 一起使用。它如何与 vuetify 3 配合使用？

在jetpack compose中实现长按FAB？

是否可以对晶圆厂实现长按，在晶圆厂顶部显示带有标签的小按钮，而无需额外组件？ 如果不是如何使用附加组件来实现它，但是......

在 PageView 中使用浮动操作按钮

我尝试在PageView中使用Flutter FAB，但由于FAB采用第2页中初始化的变量，因此会产生错误。 那么如何才能只在第二页之后显示FAB呢？

如何在 Flutter 中将浮动操作按钮移动到屏幕左侧？

默认情况下，浮动操作按钮位于屏幕右侧。我知道 floatActionButtonLocation 及其属性，例如 endDocked、startDocked、centerDocked，但他没有一个...

FloatingButton 在 Android Studio 中不居中

我正在 Android Studio 中制作一个包含底部导航的屏幕，由教程指导，但就我而言，出现了错误，我无法解决它。 正如您在图片中看到的，有一个空格

如何用图像填充 Flutter 浮动操作按钮？

现在我的浮动操作栏（FAB）上有一个图像，但它看起来像是在它的上面。我希望它填充按钮的整个内部/形状 浮动操作按钮：浮动操作Bu...

如何在 Jetpack Compose 中将 FAB 扩展为 Sheet？

我正在尝试在 Jetpack Compose 中创建一个 Material 3 浮动操作按钮，该按钮在单击时会展开为具有多个选项的工作表。我正在努力实现这样的目标： 上面的例子我...

如何将平滑的动画应用到浮动操作按钮上的操作显示？

我在reactjs中有代码，旨在在屏幕右下角显示一个浮动操作按钮。但是，我需要在显示 FAB 操作时应用平滑的动画，以便...

Scaffold.geometryOf() 只能在绘制阶段访问

在windows上调试时抛出异常，stacktrace： 错误：flutter/runtime/dart_vm_initializer.cc(41)] 未处理的异常：Scaffold.geometryOf() 只能在绘制阶段访问....

如何禁用 RecyclerView 项目的点击

我正在使用浮动操作按钮。我想在按 FAB 按钮时禁用 Recyclerview 项目的单击。我尝试了这个方法，但不起作用 setClickable(true); 我的布局 我正在使用浮动操作按钮。我想在按 FAB 按钮时禁用 Recyclerview 项目的单击。我尝试了这个方法，但不起作用setClickable(true); 我的布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:fab="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:background="#fff" tools:context="com.hartwintech.socialchat.activity.IconTabsActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:scrollbars="vertical" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" > </android.support.v7.widget.RecyclerView> <com.github.clans.fab.FloatingActionMenu android:id="@+id/floatmenu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="60dp" android:layout_marginRight="16dp" fab:fab_showAnimation="@anim/show_from_bottom" fab:fab_hideAnimation="@anim/hide_to_bottom" fab:menu_labels_style="@style/MenuLabelsStyle" fab:menu_shadowColor="#444" fab:menu_colorNormal="#FFB805" fab:menu_colorPressed="#F2AB00" fab:menu_colorRipple="#D99200"/> </RelativeLayout> Java 类 floatMenu.setOnMenuToggleListener(new FloatingActionMenu.OnMenuToggleListener() { @Override public void onMenuToggle(boolean opened) { if (opened) { final int color = R.color.transp; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { mrecyclerview.setClickable(false); mrecyclerview.setEnabled(false); mrecyclerview.setForeground(new ColorDrawable(ContextCompat.getColor(getContext(), color))); } } else { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { mrecyclerview.setClickable(true); mrecyclerview.setEnabled(true); mrecyclerview.setForeground(null); } } } }); 您可以向适配器添加一个简单的布尔值，如下所示： public boolean isClickable = true; 并将其设置在您的 fab 中 - 单击： mAdapter.isClickable = true/false; 并且在适配器的 OnClickListener 中，仅在可点击时才起作用： public void onClick(View view) { if(!isClickable) return; // do your click stuff } 要禁用 RecyclerView，请按照以下步骤操作： 1。将以下视图添加到您的布局文件中， <View android:id="@+id/viewDisableLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#40000000" android:clickable="true" android:focusable="true" android:visibility="gone"/> 2.当你想禁用 RecyclerView 时，设置视图可见性 `View.VISIBLE 您可以简单地使用递归来禁用/启用视图上的点击 public static void setClickable(View view, boolean clickable) { if (view != null) { if (view instanceof ViewGroup) { ViewGroup viewGroup = (ViewGroup) view; for (int i = 0; i < viewGroup.getChildCount(); i++) { setClickable(viewGroup.getChildAt(i), clickable); } } view.setClickable(clickable); } } Björn Kechel 的回答对我有帮助。正如他所说，我只是添加了布尔值。当我单击 fab 菜单时，布尔值被激活。然后要把条件写在mrecyclerview.addOnItemTouchListenerJava Class public Boolean fabClick = false; floatMenu.setOnMenuToggleListener(new FloatingActionMenu.OnMenuToggleListener() { @Override public void onMenuToggle(boolean opened) { if (opened) { final int color = R.color.transp; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { fabClick = true; mrecyclerview.setClickable(false); mrecyclerview.setEnabled(false); mrecyclerview.setForeground(new ColorDrawable(ContextCompat.getColor(getContext(), color))); } } else { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { fabClick = false; mrecyclerview.setClickable(true); mrecyclerview.setEnabled(true); mrecyclerview.setForeground(null); } } } }); mrecyclerview.addOnItemTouchListener(new RecyclerTouchListener(getActivity(), mrecyclerview, new RecyclerTouchListener.ClickListener() { @Override public void onClick(View view, int position) { if(!fabClick) { android.support.v4.app.FragmentTransaction ft = getFragmentManager().beginTransaction(); ft.setCustomAnimations(R.anim.fragment_anim_start, R.anim.fragment_anim_stop); Intent i = new Intent(getActivity(), Group_Chat_Screen.class); startActivity(i); } } 您需要为每个FloatingActionButton设置点击监听器。 在图书馆查看此问题 使用 RecyclerView.OnItemTouchListener 的工作解决方案： @SuppressLint("ClickableViewAccessibility") @BindingAdapter("itemsClickable") fun setRecyclerViewClickable(view: RecyclerView, clickable: Boolean) { view.isEnabled = clickable if (!clickable) { val itemTouchListener = object : RecyclerView.OnItemTouchListener { override fun onTouchEvent(rv: RecyclerView?, e: MotionEvent?) { } override fun onInterceptTouchEvent(rv: RecyclerView?, e: MotionEvent?): Boolean { return rv?.isEnabled == false } override fun onRequestDisallowInterceptTouchEvent(disallowIntercept: Boolean) { } } view.addOnItemTouchListener(itemTouchListener) view.tag = itemTouchListener } else { (view.tag as? RecyclerView.OnItemTouchListener)?.let { view.requestDisallowInterceptTouchEvent(true) view.removeOnItemTouchListener(it) } } } Java recyclerView.setOnTouchListener((view1, motionEvent) -> true ); 科特林 reyclerView.setOnTouchListener { v, event -> true } 此解决方案禁用所有触摸事件 您可以禁用recyclerview的触摸 recyclerView.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { return true; } }); 在xml文件中，将FloatingActionMenu的layout_width和layout_height设置为match_parent，并将clickable设置为false： android:layout_width="match_parent " android:layout_height="match_parent " android:clickable="false" 在你的java课程中， floatMenu.setOnMenuToggleListener(new FloatingActionMenu.OnMenuToggleListener() { @Override public void onMenuToggle(boolean opened) { if (opened) { floatMenu.setClickable(true); } else { floatMenu.setClickable(false); } } }); 这应该有效。 我用非常简单的逻辑解决了这个问题。这将防止双击单个项目和 RecyclerView 的多个项目。 在您的 Activity 中声明一个变量。 private long mLastClickTime = 0; 然后在任何OnClickListener中使用。 @Override public void onClick(View v) { if(SystemClock.elapsedRealtime() - mLastClickTime < 1000){//You can reclick after 1 second return;//Before 1 seconds from first click this onclick will return from here } mLastClickTime = SystemClock.elapsedRealtime(); //Do stuff here } 实际上，当我搜索防止双击按钮时，我在 stackover flow 中找到了这个解决方案。我写这行是为了确认实际答案是由某人发布的（不幸的是，我无法找到该答案来链接他/她的答案。） 希望这能解决您的问题。:) yourRecycelerview.suppresslayout(true) 干净、简单，无需项目触摸侦听器或视图持有者逻辑即可工作。 文档： /** * Tells this RecyclerView to suppress all layout and scroll calls until layout * suppression is disabled with a later call to suppressLayout(false). * When layout suppression is disabled, a requestLayout() call is sent * if requestLayout() was attempted while layout was being suppressed. * <p> * In addition to the layout suppression {@link #smoothScrollBy(int, int)}, * {@link #scrollBy(int, int)}, {@link #scrollToPosition(int)} and * {@link #smoothScrollToPosition(int)} are dropped; TouchEvents and GenericMotionEvents are * dropped; {@link LayoutManager#onFocusSearchFailed(View, int, Recycler, State)} will not be * called. * * <p> * <code>suppressLayout(true)</code> does not prevent app from directly calling {@link * LayoutManager#scrollToPosition(int)}, {@link LayoutManager#smoothScrollToPosition( *RecyclerView, State, int)}. * <p> * {@link #setAdapter(Adapter)} and {@link #swapAdapter(Adapter, boolean)} will automatically * stop suppressing. * <p> * Note: Running ItemAnimator is not stopped automatically, it's caller's * responsibility to call ItemAnimator.end(). * * @param suppress true to suppress layout and scroll, false to re-enable. */

如何在flutter中为按钮添加延迟

如何防止我尝试过的颤动中的按钮垃圾邮件 未来延迟 但它仍然可能会被垃圾邮件发送，我相信我应该在 onPressed 之前添加此内容，但我无法这样做

导航到另一个撰写屏幕不断崩溃

我正在尝试通过浮动操作按钮导航到我的 View_Recipe.kt 组合，但它一直在崩溃。这是我的浮动操作按钮和 navGraph 代码。 @可组合 有趣

为什么颜色不适用于 android material3？

最近在android学习之旅中熟悉了Material3。我已经在我的 colors.xml 文件中成功定义了颜色，但是，我遇到了应用栏、工具栏的问题...

带有 ExtJS 的浮动操作按钮（FAB）

我无法找到在 Extjs 中添加 FAB 的示例并提出 FAB mixin。 希望，这会为处理同一问题的人节省时间。 FAB mixin 是一个可重用的组件......

如何在滚动过程中移动 FAB

我想拥有这样的Fab 我也想拥有这样的Fab <Box display="flex" alignItems="center"justifyContent="center"> <Fab color="primary" aria-label="add" variant="extended" size="large" style={{position: 'absolute', bottom: '2.2rem'}}> <AddShoppingCartIcon /> Add to shopping cart </Fab> </Box> 当我进入网站时，按钮应该在底部，marginBottom: 0。当我向下滚动到最后时，Fab 的最终位置应该是例如底部边距：2rem。 有谁知道如何实现这一目标？ 感谢您的帮助 您可以通过使用 React hooks 根据用户的滚动位置更新 Fab 组件的样式来实现此效果。这是一个示例实现： import React, { useState, useEffect } from "react"; import { Box, Fab } from "@material-ui/core"; import AddShoppingCartIcon from "@material-ui/icons/AddShoppingCart"; function ScrollableFab() { const [isScrolledToBottom, setIsScrolledToBottom] = useState(false); useEffect(() => { function handleScroll() { const scrolledToBottom = window.innerHeight + window.pageYOffset >= document.body.offsetHeight; setIsScrolledToBottom(scrolledToBottom); } window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []); const fabStyle = { position: "fixed", bottom: isScrolledToBottom ? "2.2rem" : "0", }; return ( <Box display="flex" alignItems="center" justifyContent="center"> <Fab color="primary" aria-label="add" variant="extended" size="large" style={fabStyle} > <AddShoppingCartIcon /> Add to shopping cart </Fab> </Box> ); } export default ScrollableFab;