【Material-UI】Lists中的List Controls详解

Material-UI 是 React 生态系统中非常受欢迎的 UI 框架，它提供了一系列强大且易于使用的组件，用于构建现代化的用户界面。在所有组件中，List 是一个非常常用的组件，用于展示一系列项目（items）。本文将详细介绍 Material-UI 中 List 组件的控制元素，即 List Controls，并展示如何使用它们来增强列表的交互性。

一、List Controls 组件概述

1. 组件介绍

List Controls 是 List 组件的一部分，旨在为列表项（List Item）提供额外的操作或状态指示功能。它们通常以复选框（Checkbox）、开关（Switch）、或图标按钮（IconButton）的形式存在，允许用户在列表项中执行二次操作或显示特定状态。

通过 List Controls，开发者可以轻松地为列表项添加额外的交互功能，例如标记选中项、切换设置或添加评论等。这些控件与列表项的主要内容并列显示，提供了丰富的交互体验。

2. 常见的List Controls

在 Material-UI 中，常见的 List Controls 包括：

• Checkbox：用于标记列表项的选中状态，常见于待办事项列表等。
• Switch：用于切换列表项的某些开关状态，通常用于设置类列表。
• IconButton：用于提供与列表项相关的附加操作，例如评论、删除或编辑。

二、Checkbox在List中的应用

1. 基本用法

Checkbox 是最常见的 List Controls 之一，通常用于标记列表项的选中状态。可以将 Checkbox 作为列表项的主要操作或次要操作。以下是 Checkbox 的一个基本使用示例：

import * as React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Checkbox from '@mui/material/Checkbox';
import IconButton from '@mui/material/IconButton';
import CommentIcon from '@mui/icons-material/Comment';

export default function CheckboxList() {
  const [checked, setChecked] = React.useState([0]);

  const handleToggle = (value) => () => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    setChecked(newChecked);
  };

  return (
    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
      {[0, 1, 2, 3].map((value) => {
        const labelId = `checkbox-list-label-${value}`;

        return (
          <ListItem
            key={value}
            secondaryAction={
              <IconButton edge="end" aria-label="comments">
                <CommentIcon />
              </IconButton>
            }
            disablePadding
          >
            <ListItemButton role={undefined} onClick={handleToggle(value)} dense>
              <ListItemIcon>
                <Checkbox
                  edge="start"
                  checked={checked.indexOf(value) !== -1}
                  tabIndex={-1}
                  disableRipple
                  inputProps={{ 'aria-labelledby': labelId }}
                />
              </ListItemIcon>
              <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
            </ListItemButton>
          </ListItem>
        );
      })}
    </List>
  );
}

2. Checkbox作为主要操作

在上面的示例中，Checkbox 被用作主要操作，列表项的选中状态由 Checkbox 控制，并且它是列表项的状态指示器。IconButton 则作为次要操作，例如添加评论。

3. Checkbox作为次要操作

Checkbox 也可以作为次要操作，将其放置在列表项的末尾或其他位置，而不是作为主要操作的标志。在这种情况下，它不再作为列表项的主要状态指示器，而是作为一个独立的操作。

以下示例展示了如何将 Checkbox 作为次要操作：

import * as React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Checkbox from '@mui/material/Checkbox';
import Avatar from '@mui/material/Avatar';

export default function CheckboxListSecondary() {
  const [checked, setChecked] = React.useState([1]);

  const handleToggle = (value) => () => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    setChecked(newChecked);
  };

  return (
    <List dense sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
      {[0, 1, 2, 3].map((value) => {
        const labelId = `checkbox-list-secondary-label-${value}`;
        return (
          <ListItem
            key={value}
            secondaryAction={
              <Checkbox
                edge="end"
                onChange={handleToggle(value)}
                checked={checked.indexOf(value) !== -1}
                inputProps={{ 'aria-labelledby': labelId }}
              />
            }
            disablePadding
          >
            <ListItemButton>
              <ListItemAvatar>
                <Avatar
                  alt={`Avatar n°${value + 1}`}
                  src={`/static/images/avatar/${value + 1}.jpg`}
                />
              </ListItemAvatar>
              <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
            </ListItemButton>
          </ListItem>
        );
      })}
    </List>
  );
}

三、Switch在List中的应用

1. Switch的基本用法

Switch 是一种用于切换状态的控件，它通常被用作列表项的次要操作，例如启用或禁用某项功能。以下示例展示了如何在 List 中使用 Switch：

import * as React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import ListSubheader from '@mui/material/ListSubheader';
import Switch from '@mui/material/Switch';
import WifiIcon from '@mui/icons-material/Wifi';
import BluetoothIcon from '@mui/icons-material/Bluetooth';

export default function SwitchListSecondary() {
  const [checked, setChecked] = React.useState(['wifi']);

  const handleToggle = (value) => () => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    setChecked(newChecked);
  };

  return (
    <List
      sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
      subheader={<ListSubheader>Settings</ListSubheader>}
    >
      <ListItem>
        <ListItemIcon>
          <WifiIcon />
        </ListItemIcon>
        <ListItemText id="switch-list-label-wifi" primary="Wi-Fi" />
        <Switch
          edge="end"
          onChange={handleToggle('wifi')}
          checked={checked.indexOf('wifi') !== -1}
          inputProps={{
            'aria-labelledby': 'switch-list-label-wifi',
          }}
        />
      </ListItem>
      <ListItem>
        <ListItemIcon>
          <BluetoothIcon />
        </ListItemIcon>
        <ListItemText id="switch-list-label-bluetooth" primary="Bluetooth" />
        <Switch
          edge="end"
          onChange={handleToggle('bluetooth')}
          checked={checked.indexOf('bluetooth') !== -1}
          inputProps={{
            'aria-labelledby': 'switch-list-label-bluetooth',
          }}
        />
      </ListItem>
    </List>
  );
}

2. Switch的二次操作

在上面的示例中，Switch 作为次要操作，提供了启用或禁用功能的能力。它通常被放置在列表项的右侧，并且与主要操作（例如显示 Wi-Fi 名称）并行存在。

四、List Controls的扩展应用

除了 Checkbox 和 Switch，开发者还可以使用其他类型的 List Controls 来增强列表项的功能，例如 IconButton。IconButton 可以作为次要操作按钮，用于触发一些特定的操作，如删除列表项、添加评论、或触发弹窗等。

List Controls 使得 List 组件不仅仅是一个静态的数据展示，还能够承载更多的交互功能，为用户提供更丰富的操作体验。

五、总结

在 Material-UI 的 List 组件中，List Controls 为开发者提供了丰富的交互可能性。通过将 Checkbox、Switch、IconButton 等控件与列表项相结合，开发者可以轻松实现复杂的 UI 交互，提升应用的用户体验。

推荐：

• JavaScript
• react
• vue

---