带有CheckBox不在提醒的dialog

本文介绍了一种自定义Dialog的方法,包括创建继承Dialog的类、设置布局样式及如何使用该Dialog。通过实例展示了如何添加不在提醒的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在开发中需要弹出dialog,有的需要有不在提醒的功能,这样的系统没有,只能自己自定义,下面就看一下我自己写的这个可以拿走直接用

1:创建一个类继承dialog

public class MyDialog extends Dialog {
    private Context context;
    private String title;
    private String confirmButtonText;
    private String cacelButtonText;
    private TextView tvTitle;
    private TextView tvConfirm;
    private TextView tvCancel;
    private CheckBox isSele;
    private ClickListenerInterface clickListenerInterface;
    public interface ClickListenerInterface { //在外部使用的点击事件接口

        public void doConfirm();//确定的事件

        public void doCancel();//取消的事件
        void setIsSelect(boolean isChecked);//cheBox的状态
    }
    public MyDialog(@NonNull Context context, String title, String confirmButtonText, String cacelButtonText) {
        super(context, R.style.MyDialog);
        this.context=context;
        this.title = title;
        this.confirmButtonText = confirmButtonText;
        this.cacelButtonText = cacelButtonText;
    
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        init();
    }

    private void init() {
        LayoutInflater inflater = LayoutInflater.from(context);
        View view = inflater.inflate(R.layout.confirm_dialog, null);
        setContentView(view);
        tvTitle = (TextView) view.findViewById(R.id.title);
        tvConfirm = (TextView) view.findViewById(R.id.confirm);
        tvCancel = (TextView) view.findViewById(R.id.cancel);
        isSele = view.findViewById(R.id.cb_issele);

        tvTitle.setText(title);
        tvConfirm.setText(confirmButtonText);
        tvCancel.setText(cacelButtonText);

        tvConfirm.setOnClickListener(new clickListener());
        tvCancel.setOnClickListener(new clickListener());
        isSele.setOnCheckedChangeListener(new clickListener());

        Window dialogWindow = getWindow();
        WindowManager.LayoutParams lp = dialogWindow.getAttributes();
        DisplayMetrics d = context.getResources().getDisplayMetrics(); // 获取屏幕宽、高用
        lp.width = (int) (d.widthPixels * 0.8); // 高度设置为屏幕的0.6
        dialogWindow.setAttributes(lp);
    }
    public void setClicklistener(ClickListenerInterface clickListenerInterface) {
        this.clickListenerInterface = clickListenerInterface;
    }

    private class clickListener implements View.OnClickListener,CompoundButton.OnCheckedChangeListener {
        @Override
        public void onClick(View v) {
            int id = v.getId();
            switch (id) {
                case R.id.confirm:
                    clickListenerInterface.doConfirm();
                    break;
                case R.id.cancel:
                    clickListenerInterface.doCancel();
                    break;



            }
        }

        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            clickListenerInterface.setIsSelect(isChecked);
        }
    };
}

xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/item_bg"
    android:orientation="vertical">
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingTop="14dp"
        android:textColor="@color/login_hint"
        android:textSize="@dimen/text_size_18" />

    <CheckBox
        android:id="@+id/cb_issele"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="不在提示"
        android:layout_margin="@dimen/dp_10"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="14dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="30dp" >

        <TextView
            android:id="@+id/confirm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="@color/login_hint"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="@color/login_hint"
            android:textSize="16sp" />
        </LinearLayout>
</LinearLayout>

不能忘记样式style

  <style name="MyDialog" parent="@android:style/Theme.Holo.Dialog">
        <!-- 是否有边框 -->
        <item name="android:windowFrame">@null</item>
        <!--是否在悬浮Activity之上  -->
        <item name="android:windowIsFloating">true</item>
        <!-- 标题 -->
        <item name="android:windowNoTitle">true</item>
        <!--阴影  -->
        <item name="android:windowIsTranslucent">true</item><!--半透明-->
        <!--背景透明-->
        <item name="android:windowBackground">@android:color/transparent</item>
        <!-- 还可以加入一些弹出和退出的动画 (lan)-->
    </style>

这样基本就好了,现在开始使用,在需要的展示的地方使用直接new就好

  if (!isSelect){//设置一个Boolean值来判断是否显示dialog,如果点了不在提示则不显示否则显示
                    final MyDialog myDialog = new MyDialog(GlidActivity.this,"补发试卷","立即补发","下次再说",false);
                    myDialog.show();
                    myDialog.setClicklistener(new MyDialog.ClickListenerInterface() {
                        @Override
                        public void doConfirm() {//点击确定的操作,
                            Toast.makeText(GlidActivity.this,"补发完成",Toast.LENGTH_LONG).show();
                            
                            myDialog.dismiss();
                        }

                        @Override
                        public void doCancel() {
                            Toast.makeText(GlidActivity.this,"再见",Toast.LENGTH_LONG).show();
                            myDialog.dismiss();
                        }

                        @Override
                        public void setIsSelect(boolean isChecked) {
                            if (isChecked){
                                isSelect = isChecked;
                                Toast.makeText(GlidActivity.this,"勾选",Toast.LENGTH_LONG).show();
                            }else {
                                isSelect = isChecked;
                                Toast.makeText(GlidActivity.this,"未勾选",Toast.LENGTH_LONG).show();
                            }

                        }
                    });
                }

            }
这下就好了,可以使用了。

一部分内容取自这篇博客,大家有兴趣也可以看看https://www.cnblogs.com/lwbqqyumidi/p/3645561.html

<think>嗯,用户想了解Vue3中v-model的双向绑定使用方法,并且需要示例。我之前看过一些关于Vue的组件实现v-model的资料,比如引用[1]和引用[2]。首先,Vue3的v-model和Vue2有什么不同呢?对了,Vue2中每个组件只能有一个v-model,而Vue3支持多个,这点需要提到。 用户可能需要基础用法的例子,比如在表单元素上的使用,比如input和checkbox。然后,如何在自定义组件中使用v-model呢?应该要解释modelValue这个默认属性,以及如何通过emit来更新值。比如在子组件里,用defineProps接收modelValue,然后用defineEmits来触发update:modelValue事件,这样父组件的值就能更新了。 接下来是多个v-model的情况,用户可能想知道如何同时绑定多个值,比如在一个表单组件里同时有姓名和年龄。这时候可以用v-model:name和v-model:age的形式,子组件对应不同的prop和emit事件,比如update:name和update:age。 然后是多层封装组件的情况,比如引用[2]中的Dialog组件,里面用了Element UI的el-dialog,这时候如何通过计算属性visible来桥接modelValue。需要说明computed的get和set方法,以及emit的触发时机。 可能还需要提到修饰符的使用,比如.lazy或者自定义修饰符,但用户的问题里没提到,可以暂时不考虑,或者简单带过。 要确保示例代码正确,比如在Vue3中使用<script setup>语法,以及如何定义props和emits。同时,注意在子组件中,v-model绑定到el-dialog的visible变量,而visible通过计算属性来同步父组件的modelValue。 用户可能遇到的问题包括:prop名称不对,emit的事件名称不正确,或者没有正确使用计算属性导致双向绑定失败。这些需要提醒一下。 最后,生成相关问题的时候,要围绕v-model的深层机制、性能优化、对比Vue2的不同点,以及常见问题。比如如何自定义修饰符,或者多个v-model的应用场景。</think>### Vue3中v-model双向绑定使用方法详解 #### 一、基础用法 在Vue3中,`v-model`可通过`modelValue`属性和`update:modelValue`事件实现双向绑定。例如表单元素: ```html <!-- 父组件 --> <template> <ChildComponent v-model="message"/> </template> <script setup> import { ref } from 'vue' const message = ref('Hello') </script> ``` ```html <!-- 子组件 --> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" > </template> <script setup> defineProps(['modelValue']) defineEmits(['update:modelValue']) </script> ``` 此为默认的单属性绑定模式[^1]。 #### 二、多v-model绑定 Vue3支持单个组件绑定多个`v-model`: ```html <!-- 父组件 --> <UserForm v-model:name="userName" v-model:age="userAge" /> ``` ```html <!-- 子组件 --> <template> <input :value="name" @input="$emit('update:name', $event.target.value)"> <input :value="age" @input="$emit('update:age', $event.target.value)"> </template> <script setup> defineProps(['name', 'age']) defineEmits(['update:name', 'update:age']) </script> ``` #### 三、深度组件封装示例 参考多层弹窗组件实现(来自引用[2]): ```html <!-- Dialog.vue --> <template> <el-dialog v-model="visible"> <!-- 内容 --> </el-dialog> </template> <script setup> const props = defineProps({ modelValue: Boolean }) const emit = defineEmits(['update:modelValue']) const visible = computed({ get: () => props.modelValue, set: (val) => emit('update:modelValue', val) }) </script> ``` 通过计算属性桥接第三方组件的双向绑定[^2]。 #### 四、注意事项 1. 默认属性名从`value`改为`modelValue` 2. 自定义属性时需明确指定参数:`v-model:title="pageTitle"` 3. 使用`defineEmits`声明自定义事件 4. 复合组件推荐使用`computed`属性作为中间层
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值