标签: bottom-sheet

我有一个底部表单对话框片段，用作底部应用程序栏的菜单。

如果我非常快地单击菜单图标两次，该对话框会显示两次，并且我必须将其关闭两次，这很烦人。

我的代码如下：

活动主页.kt

override fun onOptionsItemSelected(item: MenuItem): Boolean {
return when (item.itemId) {
    android.R.id.home -> {
        if(mBottomNavDrawerFragment != null && mBottomNavDrawerFragment!!.dialog!!.isShowing){
            mBottomNavDrawerFragment?.dismiss()
            return false
        }
        mBottomNavDrawerFragment = RoundedBottomSheetDialogFragment()
        mBottomNavDrawerFragment?.show(supportFragmentManager, mBottomNavDrawerFragment?.tag)
        true
    }
    R.id.BottomAppBar_fromHomeActivity_MenuMain_Search -> {
        Toast.makeText(this, "Not Implemented yet!", Toast.LENGTH_SHORT).show()
        false
    }
    else -> true
}
}

有人可以帮忙吗？谢谢

我使用 raw-bottom-sheet 作为我的底部模式，就像菜单选项卡一样。这是底部模态的 github 链接： https: //github.com/nysamnang/react-native-raw-bottom-sheet。底部菜单选项卡是标题组件的一部分，因为它只显示按下标题组件的底部。它效果很好，但我无法模糊底页的背景。它不像模态那样工作。这是我想要模糊的链接：https://raw.githubusercontent.com/nysamnang/stock-images/master/react-native-raw-bottom-sheet/RNRBS-IOS-2.0.3.gif

这是我的标头组件：

import React, { useRef } from 'react'
import Box from '../../components/box'
import { Logo, Add, Menu } from '../../components/icons'
import Button from '../button'
import theme from '../../utils/theme'
import RBSheet from 'react-native-raw-bottom-sheet'
import SettingsSvg from '../../components/icons/Settings'
import { User } from '../../components/icons'
import Text from '../../components/text'
import { padding } from 'styled-system'

export default function CustomHeader(props) {
  const refRBSheet = useRef()

  return (
    <>
      <Box flexDirection="row" height={50} backgroundColor="white" {...props}>
        <Box flex={1} …

我使用 CupertinoTabBar，但想在用户设备是 Android 时显示材质设计 BottomSheet。但是，当我同时使用它们时，BottomSheet 隐藏在 CupertinoTabBar 后面，如下所示。

你能帮我解决这个问题吗？或者两者同时使用是否不好？

我的简化代码

class MyApp extends StatelessWidget {
  void onPressed(BuildContext context) async {
    await showModalBottomSheet(
      context: context,
      builder: (context) => Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            title: Text('Delete'),
            onTap: () => Navigator.of(context).pop('delete'),
          ),
          Divider(),
          ListTile(
            title: Text('Cancel'),
            onTap: () => Navigator.of(context).pop('cancel'),
          )
        ],
      ),
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.music_note),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
            ),
          ]
        ),
        tabBuilder: (context, index) { …

当我在底部工作表上使用范围滑块时，我被困在这里，范围滑块无法工作。我收到 0 错误，所以我不知道它卡在哪里。当我在构建函数中使用该函数但不在底部工作表中时，该函数工作正常。下面是它的代码-：

RangeValues Myheight = const RangeValues(150, 180);
 
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: InkWell(
                  child: TextField(
                    controller: interest,
                    decoration: InputDecoration(
                      enabled: false,
                      suffixIcon: Padding(
                        padding: EdgeInsets.only(top: 15),
                        // add padding to adjust icon
                        child: Icon(Icons.add),
                      ),
                      prefixIcon: Padding(
                        padding: EdgeInsets.only(top: 15),
                        // add padding to adjust icon
                        child: Icon(Icons.favorite_border_rounded),
                      ),
                    ),
                  ),
                  onTap: () {
                    _bottomSheet(context, Myheight);
                  },
                ),
    );
  }


    _bottomSheet(context, myheight) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext c) {
          return Container(
            height: 250,
            child: …

我有这个简单的 BottomSheetDialog，我想将其全屏显示：

class RegistrationDialog : BottomSheetDialogFragment() {


    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var view = inflater.inflate(R.layout.dialog_registration, container, false)
        return view

    }
}

我在 React Native Expo 中使用 @gorhom/bottom-sheet 库，我想在按下 Android 上的后退按钮时关闭工作表，我该如何实现这一点？

我正在尝试将包含一些 TextViews 的底部工作表中的值传递给片段。我的片段包含一个 EditText 字段和一个浮动操作按钮。当用户单击浮动操作按钮时，底部工作表会显示其中有许多 TextViews，当用户单击底部工作表上的任何 textViews 时，值或者该 TextView 的字符串应该显示在片段的 editText 字段中，并且应该关闭底部工作表。

我曾尝试在 setOnShowListener 方法中实现 onClickListener 但它似乎不起作用。

这是我的代码：

Fragment_TextPropert1_EditText.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.sumitroy.TextProperty1_EditText"
    >
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:cardCornerRadius="15dp"
        android:padding="15dp"
        android:layout_below="@+id/view"
        android:layout_marginTop="10dp"
        app:cardUseCompatPadding="true"
        android:id="@+id/view2">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textMultiLine"
            android:hint="Enter Your Comments Here.."
            android:id="@+id/userText"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />

    </android.support.v7.widget.CardView>

<ImageButton
      android:layout_width="65dp"
      android:layout_height="65dp"
      android:id="@+id/example_Ads"
      android:background="@drawable/oval"
      android:layout_alignParentBottom="true"
      android:layout_alignParentEnd="true"
      android:layout_marginBottom="20dp"
      android:layout_marginRight="15dp"
      android:src="@drawable/double_plus"
     />


</RelativeLayout>

TextProperty1_bottomsheet.xml

    <?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

<RelativeLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">


    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" …

为 Android API 23 及更高版本编写（在 API 24 和 25 上测试）。

我编写了一个 XML，试图将 ListView 放入 BottomSheet 中。当我尝试滚动 ListView（向任何方向）时，BottomSheet 会滚动，而不是 ListView。

我已尝试以下解决方法但没有成功：

BottomSheet 中的列表视图

我的XML布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button
                android:id="@+id/refresh_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:onClick="onButtonPress"
                android:text="@string/refresh_button" />

            <RelativeLayout
                android:id="@+id/map_container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <fragment
                    android:id="@+id/map_fragment"
                    android:name="com.google.android.gms.maps.MapFragment"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/floating_action_button"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginBottom="15dp"
                    android:layout_marginRight="15dp"
                    android:clickable="true"
                    app:srcCompat="@android:drawable/ic_menu_mylocation" />

            </RelativeLayout>

        </LinearLayout>

    </RelativeLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:background="?android:attr/windowBackground"
        android:clipToPadding="true" …

我正在写一个需要底角半径的应用程序。您可以在Google Task应用程序中看到类似的内容。

这是我的代码

showModalBottomSheet(
        context: context,
        builder: (builder) {
          return new Container(
            height: 350.0,
            color: Colors.transparent,
            child: new Container(
                decoration: new BoxDecoration(
                    color: Colors.white,
                    borderRadius: new BorderRadius.only(
                        topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))),
                child: new Center(
                  child: new Text("This is a modal sheet"),
                )),
          );
        });

仍显示没有边框半径的图纸。

好吧，我找到了原因。它确实显示了圆角，但是由于脚手架的背景颜色，容器的背景保持白色。现在的问题是如何覆盖支架背景颜色。

我正在创建一个 MainActivity。此活动有一个按钮可以打开 Fragment，而 Fragment 有一个按钮可以打开底部工作表对话框。

当我在 Fragment 上时，我可以按 Back 按钮返回 MainActivity。但是，当我已经打开底部对话框时，我想禁用后退按钮，以便用户在显示底部对话框时无法按后退按钮。那么我该怎么做呢？谢谢你。

主要活动

public class MainActivity extends SdwBaseActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

public void startAction(View view){
    LoadCashTutorialScreen loadCashTutorialScreen = LoadCashTutorialScreen.newInstance();
 getSupportFragmentManager().beginTransaction().replace(R.id.container, loadCashTutorialScreen, "LoadCashTutorialScreen").addToBackStack("LoadCashTutorialScreen").commit();
}

@Override
public void onBackPressed(){
      super.onBackPressed()
      //do something so that the back button is disable when the Bottom Dialog is showing
}
}

分段：

public class LoadCashTutorialScreen extends Fragment{
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { …

我在我的 React Native 项目中使用 reanimated-bottom-sheet

bottomSheet用于测试的空页面内部工作得很好，但在主页内部则renderInner onPress不起作用。

ButtoninsiderenderHeader不起作用，main.js而这个button import来自nativeBase，我再次使用inputTextinsiderenderInner不起作用，但是当我将 200 设置为 sizeinput border并按下 时，它border起作用了，我不知道为什么

这是我的test.js页面代码：

import React from 'react'\nimport {\n  Image,\n  StyleSheet,\n  Text,\n  TouchableWithoutFeedback,\n  View,\n  TextInput,\nDimensions\n} from 'react-native'\nimport { Button,Icon } from 'native-base';\n\nimport BottomSheet from 'reanimated-bottom-sheet'\nconst {width, height}= Dimensions.get('window')\n\n\nexport default class Example extends React.Component {\n    state = {\n        bottomSheet:{\n            opened: false,\n            height: height-80\n        }\n …