如何用Qt(C++)实现工具栏图标的激活状态显示

Hey there! Let's figure out how to implement that toolbar button state toggle—exactly like the Bold, Italic, or Underline buttons in Microsoft Word, where you can clearly tell if they're active or not. Here's a step-by-step breakdown with practical examples:

The key here is two-fold:

• Track the active/inactive state of each toolbar button
• Update the button's UI based on its state (and also sync the state with the selected content, if you're working with a rich text editor)

This works for basic use cases without any frameworks.

1. HTML Structure #

First, set up your toolbar with buttons. We'll use data-action to identify each button's function:

<div class="toolbar">
  <button class="toolbar-btn" data-action="bold">B</button>
  <button class="toolbar-btn" data-action="italic">I</button>
  <button class="toolbar-btn" data-action="underline">U</button>
</div>
<div contenteditable="true" class="editor">Type or edit text here...</div>

2. CSS for State Differentiation #

Define an .active class to make the button's state obvious. You don't have to use highlighting—any visual difference works (e.g., darker background, border, icon color):

.toolbar-btn {
  padding: 8px 12px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  margin-right: 4px;
}

.toolbar-btn.active {
  background: #e0e0e0;
  border-color: #666;
  font-weight: bold; /* Extra visual cue for the bold button */
}

.toolbar-btn:hover {
  background: #f5f5f5;
}

3. JavaScript to Handle State Toggle & Sync #

We need to:

• Toggle the button's active state on click
• Apply the formatting to the editor content
• Sync the button state when the user selects existing formatted text

const toolbarButtons = document.querySelectorAll('.toolbar-btn');
const editor = document.querySelector('.editor');

// Handle button clicks
toolbarButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    const action = btn.dataset.action;
    // Apply formatting to the editor
    document.execCommand(action, false, null);
    // Toggle active state
    btn.classList.toggle('active');
  });
});

// Sync button state with selected content
editor.addEventListener('selectionchange', () => {
  toolbarButtons.forEach(btn => {
    const action = btn.dataset.action;
    // Check if the current selection has the formatting
    const isActive = document.queryCommandState(action);
    // Update button class based on state
    btn.classList.toggle('active', isActive);
  });
});

If you're using a framework like React, the idea is similar—just use state hooks to manage button status:

import { useState, useEffect } from 'react';

const TextEditor = () => {
  const [activeButtons, setActiveButtons] = useState({
    bold: false,
    italic: false,
    underline: false
  });

  const handleButtonClick = (action) => {
    document.execCommand(action, false, null);
    // Toggle the state for the clicked button
    setActiveButtons(prev => ({
      ...prev,
      [action]: !prev[action]
    }));
  };

  // Sync state with selection changes
  useEffect(() => {
    const checkSelectionState = () => {
      setActiveButtons({
        bold: document.queryCommandState('bold'),
        italic: document.queryCommandState('italic'),
        underline: document.queryCommandState('underline')
      });
    };

    document.addEventListener('selectionchange', checkSelectionState);
    return () => document.removeEventListener('selectionchange', checkSelectionState);
  }, []);

  return (
    <div>
      <div className="toolbar">
        <button
          className={`toolbar-btn ${activeButtons.bold ? 'active' : ''}`}
          onClick={() => handleButtonClick('bold')}
        >
          B
        </button>
        <button
          className={`toolbar-btn ${activeButtons.italic ? 'active' : ''}`}
          onClick={() => handleButtonClick('italic')}
        >
          I
        </button>
        <button
          className={`toolbar-btn ${activeButtons.underline ? 'active' : ''}`}
          onClick={() => handleButtonClick('underline')}
        >
          U
        </button>
      </div>
      <div contentEditable={true} className="editor">
        Type or edit text here...
      </div>
    </div>
  );
};

export default TextEditor;

• Accessibility: Don't rely solely on color to indicate state. Add visual cues like a border, icon change, or aria-pressed attribute (set to true when active) for screen readers.
• Custom Icons: Instead of text (B/I/U), use SVG icons. Swap the icon's fill color or opacity when the button is active for a cleaner look.
• Avoid execCommand (for advanced editors): If you're building a full-featured rich text editor, execCommand is deprecated. Libraries like Slate or TipTap handle state management out of the box, with built-in toolbar button state sync.

内容的提问来源于stack exchange，提问作者Jiawei Lu