如何使用Jetpack Compose创建类Google Form的MultiChoiceGrid组件？

Absolutely! Creating a Google Forms-style MultiChoice Grid is totally achievable with basic HTML, CSS, and a touch of JavaScript. Below is a complete, self-contained example that mirrors the core layout and behavior you’re after—with row questions, column headers, and exclusive radio button selection per row.

Example Code #

HTML Structure #

We’ll use a <table> for the grid layout, since it naturally aligns rows and columns. Each row represents a question, and each column (after the first) is an option. The first column holds the question text, and subsequent columns contain radio buttons tied to that row’s options.

<div class="form-container">
  <h2>Feedback Survey</h2>
  <table class="multi-choice-grid">
    <thead>
      <tr>
        <th class="question-column"></th>
        <th class="option-column">Strongly Disagree</th>
        <th class="option-column">Disagree</th>
        <th class="option-column">Neutral</th>
        <th class="option-column">Agree</th>
        <th class="option-column">Strongly Agree</th>
      </tr>
    </thead>
    <tbody>
      <tr class="question-row">
        <td class="question-text">The course content was clear and organized</td>
        <td class="option-cell"><input type="radio" name="row-1" value="1"><label></label></td>
        <td class="option-cell"><input type="radio" name="row-1" value="2"><label></label></td>
        <td class="option-cell"><input type="radio" name="row-1" value="3"><label></label></td>
        <td class="option-cell"><input type="radio" name="row-1" value="4"><label></label></td>
        <td class="option-cell"><input type="radio" name="row-1" value="5"><label></label></td>
      </tr>
      <tr class="question-row">
        <td class="question-text">The instructor was knowledgeable and helpful</td>
        <td class="option-cell"><input type="radio" name="row-2" value="1"><label></label></td>
        <td class="option-cell"><input type="radio" name="row-2" value="2"><label></label></td>
        <td class="option-cell"><input type="radio" name="row-2" value="3"><label></label></td>
        <td class="option-cell"><input type="radio" name="row-2" value="4"><label></label></td>
        <td class="option-cell"><input type="radio" name="row-2" value="5"><label></label></td>
      </tr>
      <tr class="question-row">
        <td class="question-text">I feel confident applying what I learned</td>
        <td class="option-cell"><input type="radio" name="row-3" value="1"><label></label></td>
        <td class="option-cell"><input type="radio" name="row-3" value="2"><label></label></td>
        <td class="option-cell"><input type="radio" name="row-3" value="3"><label></label></td>
        <td class="option-cell"><input type="radio" name="row-3" value="4"><label></label></td>
        <td class="option-cell"><input type="radio" name="row-3" value="5"><label></label></td>
      </tr>
    </tbody>
  </table>
  <button class="submit-btn">Submit Responses</button>
</div>

CSS Styling #

This CSS mimics Google Forms’ clean, modern look—with subtle hover states, rounded corners, and proper spacing. We’ll also make it responsive for mobile devices.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

.form-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

h2 {
  color: #202124;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
}

.multi-choice-grid {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  background-color: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  overflow: hidden;
}

.multi-choice-grid th,
.multi-choice-grid td {
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid #dadce0;
}

.multi-choice-grid th {
  background-color: #f8f9fa;
  font-weight: 500;
  color: #5f6368;
  font-size: 0.9rem;
}

.question-column {
  width: 40%;
  text-align: left;
}

.question-text {
  text-align: left;
  color: #202124;
  font-size: 0.95rem;
  line-height: 1.4;
}

.option-cell {
  position: relative;
}

.option-cell input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.option-cell label {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid #dadce0;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option-cell input[type="radio"]:checked + label {
  border-color: #1a73e8;
  background-color: #1a73e8;
}

.option-cell input[type="radio"]:checked + label::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 4px auto;
  background-color: #fff;
  border-radius: 50%;
}

.option-cell:hover label {
  border-color: #1a73e8;
}

.question-row:last-child td {
  border-bottom: none;
}

.submit-btn {
  background-color: #1a73e8;
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.submit-btn:hover {
  background-color: #1557b0;
}

/* Responsive adjustments for mobile */
@media (max-width: 600px) {
  .question-column {
    width: 100%;
  }
  .multi-choice-grid thead {
    display: none;
  }
  .multi-choice-grid tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #dadce0;
    border-radius: 8px;
  }
  .multi-choice-grid td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dadce0;
    padding: 0.8rem;
  }
  .multi-choice-grid td:last-child {
    border-bottom: none;
  }
  .option-cell {
    order: -1;
  }
}

JavaScript (Optional) #

If you want to add form submission handling (like collecting responses), here’s a simple snippet to log selected values to the console:

document.querySelector('.submit-btn').addEventListener('click', () => {
  const responses = {};
  const rows = document.querySelectorAll('.question-row');
  
  rows.forEach((row, index) => {
    const question = row.querySelector('.question-text').textContent;
    const selectedOption = row.querySelector('input[type="radio"]:checked');
    
    responses[`question-${index + 1}`] = {
      question: question,
      value: selectedOption ? selectedOption.value : 'No response'
    };
  });
  
  console.log('Survey Responses:', responses);
  // Add code here to send responses to a server, etc.
});

Key Notes #

• Exclusive Selection: Each row’s radio buttons share the same name attribute (e.g., row-1, row-2), which ensures only one option can be selected per row—this is native HTML behavior, no extra JS needed for this part.
• Styling Flexibility: The CSS is fully customizable—tweak colors, spacing, or fonts to match your exact needs.
• Responsiveness: The mobile layout collapses the grid into stacked rows, making it usable on smaller screens.

You can expand this further by adding validation (ensuring all rows are answered), custom option labels, or integrating with a backend to store responses.

内容的提问来源于stack exchange，提问作者Natdanai Chaiyakan