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

獲取DevExpress v23.2正式版下載

DevExpress技術交流群9：909157416      歡迎一起進群討論

Bottom Sheet是一個組件，它顯示固定在屏幕底部的補充內容。

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

在本文中，我們將展示一些使用場景，其中底部表單可以增強移動用戶體驗！

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

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

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

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

如上面的動畫所示，我們的底部表單是放置與點擊項目相關的附加操作按鈕的好地方。

2. 顯示篩選項

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

3. 選擇值

大多數(shù)商業(yè)應用程序都包含數(shù)據(jù)編輯器的使用，允許用戶從預定義的列表中選擇值。在桌面應用程序中，最明顯的組件選擇是帶有標準下拉菜單的ComboBoxEdit。在移動應用中，下拉菜單可能不是最好的解決方案，因為它不能充分利用可用的屏幕空間。DevExpress ComboBoxEdit和Form Item元素為您提供項目選擇模式，其中使用底部工作表替代下拉：

總結

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

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

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