Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

These iOS-only modifiers style a List and its rows. listStyle sets the overall list appearance; listRowBackground and listRowSeparator adjust individual row chrome. listStyle is applied to the List itself; the row modifiers are applied to each item inside the list, not to the list container.

​
listStyle

Sets the visual style of a List. 
.listStyle(style: "automatic" | "plain" | "insetGrouped" | "grouped" | "inset" | "sidebar"): Component
​
style
string
required
The list style to apply:
  • "automatic" — the platform default style
  • "plain" — a plain list with no section styling
  • "insetGrouped" — grouped sections with inset rounded corners (default on iOS)
  • "grouped" — grouped sections with full-width backgrounds
  • "inset" — plain list with inset margins
  • "sidebar" — optimized for sidebar navigation
Plain list 
List([
    ForEach(items, (item) =>
        Text(item.name)
    )
]).listStyle("plain")
Grouped list with sections 
List([
    Section("Fruits", [
        Text("Apple"),
        Text("Banana"),
        Text("Cherry")
    ]),
    Section("Vegetables", [
        Text("Carrot"),
        Text("Broccoli")
    ])
]).listStyle("insetGrouped")
Sidebar style 
List([
    ForEach(menuItems, (item) =>
        Label(item.title, item.icon)
    )
]).listStyle("sidebar")

​
listRowBackground

Sets the background view for a list row. 
.listRowBackground(content: Component): Component
​
content
Component
required
The component to display as the row’s background.
Colored row background Apply to content inside a List’s ForEach. 
List([
    ForEach(items, (item) =>
        Text(item.name)
            .listRowBackground(Color("blue").opacity(0.1))
    )
])
Alternating row backgrounds 
List([
    ForEach(items, (item, index) =>
        Text(item.name)
            .listRowBackground(
                index % 2 === 0
                    ? Color("gray").opacity(0.1)
                    : Color("white")
            )
    )
])
This modifier should be applied to the content views inside a List, not to the List itself. The background fills the entire row area, including under any separators.

​
listRowSeparator

Controls the visibility of list row separators. 
.listRowSeparator(visibility: "hidden" | "visible"): Component
​
visibility
"hidden" | "visible"
required
Whether the separator line below this row is visible or hidden.
Hiding separators 
List([
    ForEach(items, (item) =>
        Text(item.name)
            .listRowSeparator("hidden")
    )
])
Selectively hiding separators 
List([
    ForEach(items, (item, index) =>
        Text(item.name)
            .listRowSeparator(
                index === items.length - 1
                    ? "hidden"
                    : "visible"
            )
    )
])

​
See also

  • List — the list container component
  • Scroll chrome — scrollContentBackground and other scroll-level modifiers
  • Section — group rows with header and footer