列表

import { Host, List, Text, Section } from '@expo/ui/swift-ui';

export default function BasicListExample() {
  return (
    <Host style={{ flex: 1 }}>
      <List>
        <Section title="水果">
          <Text>苹果</Text>
          <Text>香蕉</Text>
          <Text>橙子</Text>
        </Section>
        <Section title="蔬菜">
          <Text>胡萝卜</Text>
          <Text>西兰花</Text>
          <Text>菠菜</Text>
        </Section>
      </List>
    </Host>
  );
}

import { Host, List, Label, Section } from '@expo/ui/swift-ui';

export default function ListWithLabelsExample() {
  return (
    <Host style={{ flex: 1 }}>
      <List>
        <Section title="设置">
          <Label title="Wi-Fi" systemImage="wifi" />
          <Label title="蓝牙" systemImage="antenna.radiowaves.left.and.right" />
          <Label title="蜂窝网络" systemImage="antenna.radiowaves.left.and.right.circle" />
        </Section>
      </List>
    </Host>
  );
}

import { useState } from 'react';
import { Host, List, Text, Section, Picker } from '@expo/ui/swift-ui';
import { listStyle, pickerStyle, tag } from '@expo/ui/swift-ui/modifiers';

const styles = ['automatic', 'plain', 'inset', 'insetGrouped', 'grouped', 'sidebar'] as const;

export default function ListStylesExample() {
  const [styleIndex, setStyleIndex] = useState(0);

  return (
    <Host style={{ flex: 1 }}>
      <List modifiers={[listStyle(styles[styleIndex])]}>
        <Section title="样式选择器">
          <Picker
            label="列表样式"
            selection={styleIndex}
            onSelectionChange={setStyleIndex}
            modifiers={[pickerStyle('menu')]}>
            {styles.map((style, index) => (
              <Text key={style} modifiers={[tag(index)]}>
                {style}
              </Text>
            ))}
          </Picker>
        </Section>
        <Section title="示例项目">
          <Text>项目 1</Text>
          <Text>项目 2</Text>
          <Text>项目 3</Text>
        </Section>
      </List>
    </Host>
  );
}

import { useState } from 'react';
import { Host, List, Label, Section, Button, Toggle } from '@expo/ui/swift-ui';
import { environment, tag } from '@expo/ui/swift-ui/modifiers';

type Task = { id: string; title: string };

const INITIAL_TASKS: Task[] = [
  { id: '1', title: '任务 1' },
  { id: '2', title: '任务 2' },
  { id: '3', title: '任务 3' },
  { id: '4', title: '任务 4' },
];

export default function EditableListExample() {
  const [tasks, setTasks] = useState<Task[]>(INITIAL_TASKS);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [editMode, setEditMode] = useState(false);

  const handleDelete = (indices: number[]) => {
    setTasks(prev => prev.filter((_, i) => !indices.includes(i)));
  };

  const handleMove = (sourceIndices: number[], destination: number) => {
    setTasks(prev => {
      const newTasks = [...prev];
      const [removed] = newTasks.splice(sourceIndices[0], 1);
      const adjustedDest = sourceIndices[0] < destination ? destination - 1 : destination;
      newTasks.splice(adjustedDest, 0, removed);
      return newTasks;
    });
  };

  return (
    <Host style={{ flex: 1 }}>
      <List
        selection={selectedIds}
        onSelectionChange={ids => setSelectedIds(ids.map(String))}
        modifiers={[environment('editMode', editMode ? 'active' : 'inactive')]}>
        <Section title="设置">
          <Toggle label="编辑模式" isOn={editMode} onIsOnChange={setEditMode} />
        </Section>
        <Section title="任务">
          <List.ForEach onDelete={handleDelete} onMove={handleMove}>
            {tasks.map(task => (
              <Label key={task.id} title={task.title} modifiers={[tag(task.id)]} />
            ))}
          </List.ForEach>
        </Section>
      </List>
    </Host>
  );
}

import { useState } from 'react';
import { Host, List, Text, Section } from '@expo/ui/swift-ui';
import { refreshable } from '@expo/ui/swift-ui/modifiers';

export default function RefreshableListExample() {
  const [lastRefresh, setLastRefresh] = useState<Date | null>(null);

  const handleRefresh = async () => {
    // 模拟异步数据获取
    await new Promise(resolve => setTimeout(resolve, 1500));
    setLastRefresh(new Date());
  };

  return (
    <Host style={{ flex: 1 }}>
      <List modifiers={[refreshable(handleRefresh)]}>
        <Section title="数据">
          <Text>下拉以刷新</Text>
          {lastRefresh && <Text>上次刷新：{lastRefresh.toLocaleTimeString()}</Text>}
        </Section>
      </List>
    </Host>
  );
}

import { Host, List, Text, Section } from '@expo/ui/swift-ui';
import { listRowBackground, listRowSeparator, listRowInsets } from '@expo/ui/swift-ui/modifiers';

export default function RowStylingExample() {
  return (
    <Host style={{ flex: 1 }}>
      <List>
        <Section title="已样式化的行">
          <Text modifiers={[listRowBackground('blue')]}>蓝色背景</Text>
          <Text modifiers={[listRowSeparator('hidden')]}>隐藏分隔线</Text>
          <Text modifiers={[listRowInsets({ leading: 40 })]}>额外的前导内边距</Text>
          <Text modifiers={[listRowInsets({ leading: 0, trailing: 0 })]}>无水平内边距</Text>
        </Section>
      </List>
    </Host>
  );
}

import { Host, List, Section, TextField } from '@expo/ui/swift-ui';
import { scrollDismissesKeyboard } from '@expo/ui/swift-ui/modifiers';

export default function KeyboardDismissExample() {
  return (
    <Host style={{ flex: 1 }}>
      <List modifiers={[scrollDismissesKeyboard('interactively')]}>
        <Section title="表单">
          <TextField placeholder="姓名" />
          <TextField placeholder="电子邮件" />
          <TextField placeholder="电话" />
        </Section>
      </List>
    </Host>
  );
}

import { Host, List, Text, Section } from '@expo/ui/swift-ui';
import { headerProminence } from '@expo/ui/swift-ui/modifiers';

export default function HeaderProminenceExample() {
  return (
    <Host style={{ flex: 1 }}>
      <List modifiers={[headerProminence('increased')]}>
        <Section title="重要分区">
          <Text>该分区的标题突出程度更高</Text>
        </Section>
        <Section title="另一个分区">
          <Text>标题更加醒目</Text>
        </Section>
      </List>
    </Host>
  );
}