browser action mode ---windowActionModeOverlay='true' ---titlebar

activity : windowActionModeOverlay="true"    actionmode 弹出时覆盖部分布局      若 false 则不符盖,将原有布局下移。

在activity 中使用 actionmode 会触发相应的回调方法!!!

流程:


Activity -----

    /**
     * Notifies the Activity that an action mode has been started.
     * Activity subclasses overriding this method should call the superclass implementation.

     *
     * @param mode The new action mode.
     */
    public void onActionModeStarted(ActionMode mode) {
    }

BrowserActivity-------

    @Override
    public void onActionModeStarted(ActionMode mode) {
        super.onActionModeStarted(mode);
        mController.onActionModeStarted(mode);
    }



PhoneUi------

    // action mode callbacks

    @Override
    public void onActionModeStarted(ActionMode mode) {
        if (!isEditingUrl()) {
            hideTitleBar();
        } else {
            mTitleBar.animate().translationY(mActionBarHeight);
        }
    }

在使用 Electron-Vue 构建应用程序时,可以自定义应用程序窗口的标题栏。以下是一些步骤: 1. 在 `main.js` 文件中,找到 `createWindow` 函数,并将 `frame: false` 改为 `frame: true`。这将启用原生窗口边框。 2. 在 `App.vue` 文件中,添加以下代码: ``` <template> <div class="app"> <div class="titlebar"> <div class="title">{{ title }}</div> <div class="buttons"> <div class="minimize" @click="minimizeWindow"></div> <div class="maximize" @click="toggleMaximize"></div> <div class="close" @click="closeWindow"></div> </div> </div> <router-view/> </div> </template> <script> export default { data() { return { title: 'My App' } }, methods: { minimizeWindow() { this.$store.dispatch('minimizeWindow') }, toggleMaximize() { this.$store.dispatch('toggleMaximize') }, closeWindow() { this.$store.dispatch('closeWindow') } } } </script> <style scoped> .titlebar { -webkit-app-region: drag; height: 30px; background-color: #333; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; } .title { font-size: 14px; font-weight: bold; } .buttons { display: flex; } .minimize, .maximize, .close { width: 12px; height: 12px; margin-left: 5px; background-repeat: no-repeat; background-position: center; -webkit-app-region: no-drag; } .minimize { background-image: url(./assets/img/minimize.png); } .maximize { background-image: url(./assets/img/maximize.png); } .close { background-image: url(./assets/img/close.png); } </style> ``` 3. 在 `store.js` 文件中,添加以下代码: ``` const state = { window: null, isMaximized: false } const mutations = { SET_WINDOW(state, window) { state.window = window }, SET_IS_MAXIMIZED(state, isMaximized) { state.isMaximized = isMaximized } } const actions = { createWindow({ commit }) { const win = new BrowserWindow({ width: 800, height: 600, show: false, frame: false, webPreferences: { nodeIntegration: true } }) win.on('closed', () => { app.quit() }) commit('SET_WINDOW', win) }, minimizeWindow({ state }) { state.window.minimize() }, toggleMaximize({ state, commit }) { if (state.isMaximized) { state.window.unmaximize() commit('SET_IS_MAXIMIZED', false) } else { state.window.maximize() commit('SET_IS_MAXIMIZED', true) } }, closeWindow({ state }) { state.window.close() } } ``` 4. 在 `index.html` 文件中,添加以下代码: ``` <head> ... <style> .app { -webkit-app-region: no-drag; } </style> </head> ``` 5. 在 `static/img` 文件夹中添加 `minimize.png`、`maximize.png` 和 `close.png` 图片。 现在,您可以自定义标题栏样式并添加标题栏按钮。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值