List is a container that presents rows of data arranged in a single column, similar to UITableView in UIKit but with a more declarative and simpler syntax. It’s commonly used for displaying a collection of items in a structured format and supports features like selection, deletion, and reordering of items if needed.
Parameters:
listStyle
(optional) This parameter determines the horizontal alignment of the views within the VStack. It’s of type HorizontalAlignment and can take the following values:
automatic
The standard or default list style that automatically adapts to the current platform or theme.plain
A simple, plain style that does not show separators between rows by default and does not indent rows.grouped
This style groups items in sections, similar to the grouped style in UIKit’s UITableView. It’s often used with a Section view to create distinct groups of items.inset
Provides an inset appearance to the list, with margins on the sides, giving it a card-like feel.insetGrouped
Combines the inset style with grouped sections, offering a modern look with background and spacing around grouped items.sidebar
Optimized for use in sidebars, particularly in macOS or iPadOS apps, where the list acts as a navigation pane.Default value:
automatic
<body>
<form>
<list navigationTitle="Form">
<text>Item kkc</text>
<text>Item 2</text>
<text>macka</text>
<text>Item 4</text>
<text>Item 5</text>
</list>
</form>
</body>
grouped List
<body>
<list listStyle="grouped">
<text>Item 1</text>
<text>Item 2</text>
<text>Item 3</text>
<text>noob 4</text>
<text>Item 5</text>
</list>
</body>
insetGrouped List
<body>
<list listStyle="insetGrouped">
<text>Item 1</text>
<text>Item 2</text>
<text>Item 3</text>
<text>Item 4</text>
<text>Item 5</text>
</list>
</body>
List with sections
<body>
<list>
<section header="Section 1 Header" footer="Section 1 Footer">
<text>Item 1</text>
<text>Item 2</text>
<text>Item 3</text>
<text>Item 4</text>
<text>Item 5</text>
</section>
<section header="Section 2 Header" footer="Section 2 Footer">
<text>Item 1</text>
<text>Item 2</text>
<text>Item 3</text>
<text>Item 4</text>
<text>Item 5</text>
</section>
</list>
</body>