如何在Flutter中实现如图所示的UI界面

一、UI核心结构拆解 #

先把截图中的界面拆分为3个核心模块，逐个实现更清晰：

• 顶部日期切换栏：包含「今天」「明天」「本周」选项卡，当前选中项有高亮样式
• 任务列表区：每条任务包含时间标签、任务标题、完成状态勾选框
• 底部悬浮操作按钮：圆形添加按钮，用于触发新建任务操作

二、分平台实现示例 #

1. Android（Jetpack Compose） #

顶部日期切换栏

用TabRow快速实现选项卡切换：

val tabs = listOf("今天", "明天", "本周")
var selectedTabIndex by remember { mutableStateOf(0) }

TabRow(selectedTabIndex = selectedTabIndex) {
    tabs.forEachIndexed { index, title ->
        Tab(
            text = { Text(title) },
            selected = selectedTabIndex == index,
            onClick = { selectedTabIndex = index },
            selectedContentColor = Color.Blue,
            unselectedContentColor = Color.Gray
        )
    }
}

任务列表项

自定义可复用的任务行组件：

data class Task(val time: String, val title: String, val isCompleted: Boolean)

@Composable
fun TaskItem(task: Task, onToggleCompleted: () -> Unit) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = task.time,
            modifier = Modifier.width(60.dp),
            color = Color.Gray
        )
        Text(
            text = task.title,
            modifier = Modifier.weight(1f),
            style = if (task.isCompleted) TextStyle(textDecoration = TextDecoration.LineThrough) else TextStyle()
        )
        Checkbox(
            checked = task.isCompleted,
            onCheckedChange = { onToggleCompleted() }
        )
    }
}

再用LazyColumn渲染任务列表：

val tasks = listOf(
    Task("09:00", "团队会议", false),
    Task("14:30", "项目评审", true),
    Task("16:00", "整理文档", false)
)

LazyColumn {
    items(tasks) { task ->
        TaskItem(task = task) {
            // 这里处理任务完成状态变更逻辑
        }
    }
}

底部悬浮按钮

用官方FloatingActionButton实现：

FloatingActionButton(
    onClick = { /* 打开新建任务页面 */ },
    modifier = Modifier
        .padding(16.dp)
        .align(Alignment.BottomEnd)
) {
    Icon(Icons.Default.Add, contentDescription = "添加任务")
}

2. iOS（SwiftUI） #

顶部日期切换栏

用分段选择器实现：

struct ContentView: View {
    @State private var selectedTab = 0
    let tabs = ["今天", "明天", "本周"]
    
    var body: some View {
        Picker("", selection: $selectedTab) {
            ForEach(0..<tabs.count) { index in
                Text(tabs[index]).tag(index)
            }
        }
        .pickerStyle(.segmented)
        .padding()
    }
}

任务列表项

自定义任务行组件：

struct Task: Identifiable {
    let id = UUID()
    let time: String
    let title: String
    var isCompleted: Bool
}

struct TaskRow: View {
    var task: Task
    @Binding var isCompleted: Bool
    
    var body: some View {
        HStack {
            Text(task.time)
                .foregroundColor(.gray)
                .frame(width: 60)
            Text(task.title)
                .strikethrough(isCompleted)
                .foregroundColor(isCompleted ? .gray : .primary)
                .frame(maxWidth: .infinity, alignment: .leading)
            Toggle("", isOn: $isCompleted)
                .labelsHidden()
        }
        .padding(.vertical, 8)
        .padding(.horizontal)
    }
}

用List渲染任务列表：

@State private var tasks = [
    Task(time: "09:00", title: "团队会议", isCompleted: false),
    Task(time: "14:30", title: "项目评审", isCompleted: true),
    Task(time: "16:00", title: "整理文档", isCompleted: false)
]

List {
    ForEach($tasks) { $task in
        TaskRow(task: task, isCompleted: $task.isCompleted)
    }
}

底部悬浮按钮

用系统悬浮按钮组件（iOS 16+）：

FloatingActionButton {
    // 打开新建任务页面
} label: {
    Image(systemName: "plus")
}
.padding()

三、通用优化要点 #

• 屏幕适配：确保组件在不同尺寸设备上布局正常，可通过权重、自适应宽度实现
• 状态同步：任务完成状态、选中的日期标签需绑定到状态变量，保证UI实时更新
• 交互反馈：给选项卡切换、任务勾选、按钮点击添加轻微动画或高亮，提升体验

内容的提问来源于stack exchange，提问作者Ravin Laheri