Form and Section

AndroidSwiftUICore/Sources/AndroidSwiftUICore/Primitives/Form.swift

@@ -0,0 +1,65 @@
+//
+//  Form.swift
+//  AndroidSwiftUICore
+//
+//  A Form is a grouped, scrolling container of Sections; a Section groups rows
+//  under an optional header and footer. The interpreter renders sections as
+//  inset, rounded groups with dividers between rows.
+//
+
+public struct Form<Content: View>: View {
+    internal let content: Content
+    public init(@ViewBuilder content: () -> Content) { self.content = content() }
+    public typealias Body = Never
+}
+
+extension Form: PrimitiveView {
+    public func _render(in context: ResolveContext) -> RenderNode {
+        RenderNode(
+            type: "Form",
+            id: context.path,
+            children: Evaluator.resolveChildren(content, context.descending("content"))
+        )
+    }
+}
+
+public struct Section<Content: View>: View {
+
+    internal let header: String?
+    internal let footer: String?
+    internal let content: Content
+
+    public init(@ViewBuilder content: () -> Content) {
+        self.header = nil
+        self.footer = nil
+        self.content = content()
+    }
+
+    public init<S: StringProtocol>(_ header: S, @ViewBuilder content: () -> Content) {
+        self.header = String(header)
+        self.footer = nil
+        self.content = content()
+    }
+
+    public init<H: StringProtocol, F: StringProtocol>(header: H, footer: F, @ViewBuilder content: () -> Content) {
+        self.header = String(header)
+        self.footer = String(footer)
+        self.content = content()
+    }
+
+    public typealias Body = Never
+}
+
+extension Section: PrimitiveView {
+    public func _render(in context: ResolveContext) -> RenderNode {
+        var props: [String: PropValue] = [:]
+        if let header { props["header"] = .string(header) }
+        if let footer { props["footer"] = .string(footer) }
+        return RenderNode(
+            type: "Section",
+            id: context.path,
+            props: props,
+            children: Evaluator.resolveChildren(content, context.descending("content"))
+        )
+    }
+}

AndroidSwiftUICore/Tests/AndroidSwiftUICoreTests/ControlTests.swift

@@ -115,6 +115,23 @@ struct ControlTests {
         #expect(node.children.count == 2)
     }
 
+    @Test("Form nests Sections with their header and rows")
+    func formSection() {
+        let node = ViewHost(
+            Form {
+                Section("General") {
+                    Text("Wi-Fi")
+                    Text("Bluetooth")
+                }
+            }
+        ).evaluate()
+        #expect(node.type == "Form")
+        let section = node.children.first
+        #expect(section?.type == "Section")
+        #expect(section?.props["header"] == .string("General"))
+        #expect(section?.children.count == 2)
+    }
+
     @Test("Environment objects reach @Environment properties in the subtree")
     func environmentInjection() {
         final class Model { var value = 42 }

Demo/App.swiftpm/Sources/Catalog.swift

@@ -39,6 +39,7 @@ struct CatalogEntry: Identifiable {
         CatalogEntry(id: "scroll", title: "ScrollView", screen: AnyCatalogScreen(ScrollViewPlayground())),
         CatalogEntry(id: "list", title: "List", screen: AnyCatalogScreen(ListPlayground())),
         CatalogEntry(id: "grid", title: "Grid", screen: AnyCatalogScreen(GridPlayground())),
+        CatalogEntry(id: "form", title: "Form", screen: AnyCatalogScreen(FormPlayground())),
         CatalogEntry(id: "modifier", title: "Modifiers", screen: AnyCatalogScreen(ModifierPlayground())),
         CatalogEntry(id: "interaction", title: "Interaction", screen: AnyCatalogScreen(InteractionPlayground())),
         CatalogEntry(id: "navigation", title: "Navigation", screen: AnyCatalogScreen(NavigationPlayground())),

Demo/App.swiftpm/Sources/FormPlaygrounds.swift

@@ -0,0 +1,28 @@
+#if canImport(AndroidSwiftUI)
+import AndroidSwiftUI
+#else
+import SwiftUI
+#endif
+
+struct FormPlayground: View {
+    @State private var wifi = true
+    @State private var bluetooth = false
+    @State private var brightness = 0.6
+    @State private var name = ""
+    var body: some View {
+        Form {
+            Section("Connectivity") {
+                Toggle("Wi-Fi", isOn: $wifi)
+                Toggle("Bluetooth", isOn: $bluetooth)
+            }
+            Section(header: "Display", footer: "Drag to adjust the screen brightness.") {
+                Slider(value: $brightness, in: 0...1)
+                HStack { Text("Level"); Spacer(); Text("\(Int(brightness * 100))%") }
+            }
+            Section("Account") {
+                TextField("Name", text: $name)
+                HStack { Text("Status"); Spacer(); Text(name.isEmpty ? "Guest" : name) }
+            }
+        }
+    }
+}

Demo/swiftui/src/commonMain/kotlin/com/pureswift/swiftui/Render.kt

@@ -34,6 +34,8 @@ import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -240,6 +242,10 @@ fun Render(node: ViewNode) {
 
             "TabView" -> RenderTabView(node)
 
+            "Form" -> RenderForm(node)
+
+            "Section" -> RenderSection(node)
+
             "List" -> RenderList(node)
 
             "LazyVGrid" -> RenderGrid(node, vertical = true)
@@ -313,6 +319,51 @@ private fun RenderStepper(node: ViewNode) {
     }
 }
 
+// A Form scrolls its Sections; non-Section children still render, ungrouped.
+@Composable
+private fun RenderForm(node: ViewNode) {
+    val state = rememberScrollState()
+    Column(modifier = node.composeModifiers().fillMaxSize().verticalScroll(state).padding(vertical = 8.dp)) {
+        RenderChildren(node)
+    }
+}
+
+// An inset, rounded group: uppercase header, rows separated by dividers, footer.
+@Composable
+private fun RenderSection(node: ViewNode) {
+    Column(modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 8.dp)) {
+        node.string("header")?.let {
+            Text(
+                it.uppercase(),
+                fontSize = 13.sp,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                modifier = Modifier.padding(start = 4.dp, bottom = 6.dp),
+            )
+        }
+        Surface(
+            color = MaterialTheme.colorScheme.surfaceVariant,
+            shape = RoundedCornerShape(10.dp),
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            Column {
+                val rows = node.children.filter { !it.isPresentation() }
+                rows.forEachIndexed { index, row ->
+                    if (index > 0) HorizontalDivider()
+                    Box(modifier = Modifier.padding(horizontal = 12.dp, vertical = 10.dp)) { Render(row) }
+                }
+            }
+        }
+        node.string("footer")?.let {
+            Text(
+                it,
+                fontSize = 12.sp,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                modifier = Modifier.padding(start = 4.dp, top = 6.dp),
+            )
+        }
+    }
+}
+
 // A trigger button opening a dropdown; each child Button becomes a menu item
 // firing its own tap callback.
 @Composable