【Material-UI】List 控件中的 List Controls 详解

Material-UI 是 React 生态系统中的一款优秀的 UI 框架，提供了多种强大且灵活的组件，帮助开发者构建出色的用户界面。在这些组件中，List 是一个非常常见且实用的控件，而其中的 List Controls 进一步扩展了 List 的功能，使其能够适应更多的应用场景。本文将详细介绍 Material-UI 中 List 控件的 List Controls 功能，包括 Checkbox 和 Switch 控件的使用场景与实现方法。

一、List 组件概述

1. 组件介绍

List 组件是一种常见的 UI 元素，用于展示一系列的项目或选项。它通常会与其他控件组合使用，如图标、文本、按钮等，以提供更加丰富的交互体验。在 Material-UI 中，List 组件通过高度自定义的方式，使得开发者能够根据实际需求，轻松地构建具有不同功能的列表界面。

2. List Controls 的作用

List Controls 是 List 组件中的一种功能扩展，允许开发者在列表项中加入可交互的控件，如 Checkbox、Switch 等。这些控件可以作为列表项的主要操作或次要操作，为用户提供更直观的操作方式，同时也丰富了列表组件的功能性。

二、Checkbox 控件在 List 中的应用

1. Checkbox 作为主要操作

在某些场景中，Checkbox 可以作为列表项的主要操作。此时，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 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>
  );
}

在此示例中，Checkbox 作为主要操作被放置在 ListItemButton 内部。用户可以通过点击 Checkbox 来改变列表项的选中状态，同时也能通过右侧的评论按钮触发次要操作。

2. Checkbox 作为次要操作

有时，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>
  );
}

此示例中，Checkbox 被放置在每个 ListItem 的右侧作为次要操作。用户可以点击 Avatar 或文本部分查看详细信息，而 Checkbox 则为用户提供了选择该列表项的附加操作。

三、Switch 控件在 List 中的应用

1. Switch 的功能与应用场景

Switch 控件通常用于表示开关类的选项，例如 Wi-Fi、蓝牙等设置。在 List 中，Switch 也可以作为次要操作控件，放置在列表项的右侧。与 Checkbox 类似，Switch 的状态变化会直接影响列表项的表现形式，并通过视觉反馈向用户展示当前状态。

以下代码展示了 Switch 控件在 List 中的应用：

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>
  );
}

在此示例中，Switch 控件被用于控制 Wi-Fi 和蓝牙功能的开关状态。每个 Switch 都与对应的图标和文本内容关联，并且 Switch 的状态变化会通过视觉反馈直接展示给用户。

四、总结

Material-UI 的 List Controls 提供了丰富的功能，使得开发者能够更灵活地处理列表中的交互操作。通过 Checkbox 和 Switch 这样的控件，List 组件不仅能够展示信息，还能为用户提供直接的操作入口。这种高度的自定义能力，使得 Material-UI 的 List 组件在构建复杂的用户界面时显得得心应手。

推荐：

• JavaScript
• react
• vue

---