天天看點

譯文----- JetpackCompose List清單(實驗API)

這部分内容在原文中, 是Sticky Header 和 Grids 兩部分, 原文官方标注了 experimental(實驗階段), 這意味着這部分API随時會修改,甚至是删除, 是以慎用

If you’ve used the RecyclerView widget, you’ll know that it animates item changes automatically. The Lazy layouts do not yet provide that functionality, which means that item changes cause an instant ‘snap’. You can follow this bug to track any changes for this feature.

如果你用過<code>RecyclerView</code>元件, 那麼你肯定知道它能自動設定item改變的動畫. 但是懶加載布局(基本上就是<code>LazyColumn</code>和<code>LazyRow</code>) 還沒有提供相關函數, 這意味着item像是閃爍一樣改變内容(此處翻譯讀着不順), 你可以持續關注這個bug在将來的修複情況

Caution: Experimental APIs can change in the future or may be removed entirely.

此功能為實驗性質, 在将來API可能會改變 或者完全删除

The ‘sticky header’ pattern is helpful when displaying lists of grouped data. Below you can see an example of a ‘contacts list’, grouped by each contact’s initial:

'粘性頭部'樣式 有助于實作分組清單資料的展示, 如下所示是'聯系人清單'的示例, 按照聯系人的首字母進行分組

To achieve a sticky header with LazyColumn, you can use the experimental stickyHeader() function, providing the header content

要使用<code>LazyColumn</code>實作一個粘性頭,可以使用實驗性的<code>stickyHeader()</code>函數,提供頭内容

To achieve a list with multiple headers, like the ‘contacts list’ example above, you could do:

要實作具有多個标題的清單,如上面的“聯系人清單”示例,可以執行以下操作:

The LazyVerticalGrid composable provides experimental support for displaying items in a grid.

目前<code>LazyVerticalGrid</code>這個還在實驗性質的元件 可以展示 <code>"grid"</code>樣式的items

The cells parameter controls how cells are formed into columns. The following example displays items in a grid, using <code>GridCells.Adaptive</code> to set each column to be at least <code>128.dp</code> wide:

<code>cells</code>參數控制每列樣式. 下面的示例,使用網格<code>GridCells.Adaptive</code>将每列設定為最小寬度為<code>128.dp</code>

If you know the exact amount of columns to be used, you can instead provide an instance of <code>GridCells.Fixed</code> containing the number of required columns

如果您知道要使用的列的确切數量,則可以直接通過<code>GridCells.Fixed</code>設定列的數目