DevExpress擁有.NET開發(fā)需要的所有平臺(tái)控件，包含600多個(gè)UI控件、報(bào)表平臺(tái)、DevExpress Dashboard eXpressApp 框架、適用于 Visual Studio的CodeRush等一系列輔助工具。

獲取DevExpress v23.2正式版下載

DevExpress技術(shù)交流群9：909157416      歡迎一起進(jìn)群討論

Bottom Sheet是一個(gè)組件，它顯示固定在屏幕底部的補(bǔ)充內(nèi)容。

這種UI比喻在桌面應(yīng)用程序中并不常見，但在移動(dòng)應(yīng)用中被廣泛應(yīng)用。它允許您有條件地顯示大型UI元素，為它們提供幾乎整個(gè)屏幕空間，而無需導(dǎo)航到單獨(dú)的頁(yè)面。

在本文中，我們將展示一些使用場(chǎng)景，其中底部表單可以增強(qiáng)移動(dòng)用戶體驗(yàn)！

1. 主 - 詳細(xì)數(shù)據(jù)

在桌面應(yīng)用程序中顯示主 - 詳細(xì)數(shù)據(jù)的常見解決方案是使用帶有可擴(kuò)展行和細(xì)節(jié)網(wǎng)格的數(shù)據(jù)網(wǎng)格。在移動(dòng)屏幕上，為多個(gè)數(shù)據(jù)網(wǎng)格或列表分配空間可能具有挑戰(zhàn)性。此外，創(chuàng)建可擴(kuò)展的層次結(jié)構(gòu)級(jí)別可能會(huì)使UI復(fù)雜化，特別是在每個(gè)數(shù)據(jù)行顯示不同信息的情況下。這個(gè)UI問題的一個(gè)可能解決方案是，在選擇主項(xiàng)時(shí)在Bottom Sheet中顯示詳細(xì)數(shù)據(jù)。

 Bottom Sheet允許您在視覺上顯示與主要內(nèi)容分離的大數(shù)據(jù)段，它的優(yōu)點(diǎn)是不需要用戶導(dǎo)航到單獨(dú)的頁(yè)面來查看相關(guān)信息。

我們的Bottom Sheet支持模態(tài)和內(nèi)聯(lián)顯示模式，在內(nèi)聯(lián)模式下，當(dāng)?shù)撞抗ぷ鞅泶蜷_時(shí)，您可以與主要內(nèi)容交互。當(dāng)用戶與主要內(nèi)容交互時(shí)，您可能希望在主區(qū)域?yàn)樗?她提供更多空間，但仍然保持底部表單可見，可以通過設(shè)置屬性來實(shí)現(xiàn)這個(gè)操作。

如上面的動(dòng)畫所示，我們的底部表單是放置與點(diǎn)擊項(xiàng)目相關(guān)的附加操作按鈕的好地方。

2. 顯示篩選項(xiàng)

您可以在DevExpress的集合視圖和數(shù)據(jù)網(wǎng)格旁邊使用過濾器UI元素來應(yīng)用各種過濾器，一個(gè)常見的移動(dòng)UI實(shí)現(xiàn)是在Bottom Sheet中顯示過濾器。您可以使用芯片來激活過濾器和選項(xiàng)卡視圖從一個(gè)過濾器組切換到另一個(gè)在相同的底部工作表。

3. 選擇值

大多數(shù)商業(yè)應(yīng)用程序都包含數(shù)據(jù)編輯器的使用，允許用戶從預(yù)定義的列表中選擇值。在桌面應(yīng)用程序中，最明顯的組件選擇是帶有標(biāo)準(zhǔn)下拉菜單的ComboBoxEdit。在移動(dòng)應(yīng)用中，下拉菜單可能不是最好的解決方案，因?yàn)樗荒艹浞掷每捎玫钠聊豢臻g。DevExpress ComboBoxEdit和Form Item元素為您提供項(xiàng)目選擇模式，其中使用底部工作表替代下拉：

總結(jié)

Bottom Sheet是一個(gè)多用途的UI控件，旨在解決各種移動(dòng)特定的UI需求，包括：

• 您可以使用Bottom Sheet在主屏幕中顯示大型數(shù)據(jù)段。
• 內(nèi)聯(lián)(非模態(tài))顯示模式允許您與主要內(nèi)容交互，并在需要時(shí)自動(dòng)降低底部工作表的高度。
• 當(dāng)一個(gè)項(xiàng)目被選中時(shí)，您可以顯示一個(gè)帶有操作的欄。
• 可以向底部工作表添加篩選項(xiàng)。
• 底部表單是下拉菜單的一個(gè)很好的選擇。

更多DevExpress線上公開課、中文教程資訊請(qǐng)上中文網(wǎng)獲取