本公開涉及計算機，尤其涉及一種界面的顯示方法及裝置。

背景技術：

1、用戶界面需要考慮多種因素，如顯示設備尺寸、顯示內容長度和文字語言等，以確保在各種設備上正確顯示ui內容。一種常見的方法是根據屏幕橫向尺寸設置斷點，并設計相應的布局方式，在實時判斷當前設備的屏幕寬度時，切換到適合的布局方式，以實現在不同環境下正確顯示的效果。然而，這種方式只能通過總結已知設備尺寸寬度來完成，無法應對未知的屏幕尺寸。

技術實現思路

1、本公開提供一種界面的顯示方法及裝置，以至少解決在容器尺寸動態變化的場景下，用戶界面內容的布局問題。本公開的技術方案如下：

2、根據本公開實施例的第一方面，提供一種界面的顯示方法，包括：獲取待顯示子項的配置參數、以及待顯示子項對應的顯示區域的顯示尺寸；基于待顯示子項的配置參數和顯示區域的顯示尺寸，確定與顯示區域對應的布局策略；基于布局策略，在顯示區域內顯示待顯示子項。

3、在一些實施例中，基于待顯示子項的配置參數和顯示區域的顯示尺寸，確定與顯示區域對應的布局策略，包括：獲取顯示區域的窗口實時寬度；基于窗口實時寬度，結合待顯示子項的配置參數，判斷所有待顯示子項能否在顯示區域內顯示完全；若監測到窗口實時寬度小于或者等于預設的寬度閾值，且，判斷所有待顯示子項能在顯示區域內顯示完全，則確定顯示區域對應第一布局策略；若監測到窗口實時寬度大于寬度閾值，且，判斷所有待顯示子項能在顯示區域內顯示完全，則確定顯示區域對應第二布局策略；若判斷所有待顯示子項不能在顯示區域內顯示完全，則確定顯示區域對應滑動窗口布局策略。

4、在一些實施例中，確定顯示區域對應第一布局策略，基于布局策略，在顯示區域內顯示待顯示子項，包括：基于待顯示子項的配置參數，獲取位于顯示區域內的每個待顯示子項各自對應的子項間隔寬度之和，以及，獲取位于顯示區域內的子項總個數；獲取窗口實時寬度與子項間隔寬度之和的差值，并將該差值作為子項可用總寬度；判斷每個待顯示子項各自對應的子項最小寬度是否相同；根據判斷結果，基于子項可用總寬度、每個待顯示子項各自對應的子項最小寬度和子項總個數，在顯示區域內顯示待顯示子項。

5、在一些實施例中，根據判斷結果，基于子項可用總寬度、每個待顯示子項各自對應的子項最小寬度和子項總個數，在顯示區域內顯示待顯示子項，包括：若判斷結果指示每個待顯示子項各自對應的子項最小寬度均相同，則基于子項總個數對子項可用總寬度進行平均劃分，將平均劃分后得到的寬度作為每個待顯示子項對應的子項寬度；基于每個待顯示子項對應的子項寬度以及每個待顯示子項各自對應的子項間隔寬度在顯示區域內顯示待顯示子項。

6、在一些實施例中，根據判斷結果，基于子項可用總寬度、每個待顯示子項各自對應的子項最小寬度和子項總個數，在顯示區域內顯示待顯示子項，包括：若判斷結果指示每個待顯示子項各自對應的子項最小寬度存在不同，則基于每個待顯示子項各自對應的子項最小寬度對子項可用總寬度進行非均勻劃分，獲取每個待顯示子項對應的子項寬度；基于每個待顯示子項對應的子項寬度以及每個待顯示子項各自對應的子項間隔寬度在顯示區域內顯示待顯示子項。

7、在一些實施例中，基于每個待顯示子項各自對應的子項最小寬度對子項可用總寬度進行非均勻劃分，獲取每個待顯示子項對應的子項寬度，包括：獲取子項可用總寬度與子項總個數的比值作為第一比值；針對任一待顯示子項，將該待顯示子項對應的子項最小寬度與第一比值進行對比，若該待顯示子項對應的子項最小寬度大于第一比值，則將該待顯示子項對應的子項最小寬度作為該待顯示子項對應的子項寬度；獲取待顯示子項最小寬度大于第一比值的所有待顯示子項各自對應的子項最小寬度的寬度和，并獲取子項總寬度與寬度和的差值作為剩余子項可用寬度；將子項最小寬度小于或者等于第一比值的待顯示子項作為剩余待顯示子項，獲取剩余待顯示子項的個數作為剩余待顯示子項個數；獲取剩余子項可用寬度和剩余待顯示子項個數的比值作為第二比值；針對任一剩余待顯示子項，將該剩余待顯示子項對應的子項最小寬度與第二比值進行對比，若每個剩余待顯示子項的子項最小寬度均小于第二比值，則將第二比值作為每個剩余待顯示子項對應的子項寬度。

8、在一些實施例中，若確定顯示區域對應第二布局策略，基于布局策略，在顯示區域內顯示待顯示子項，包括：將顯示區域內的每個待顯示子項各自對應的子項最小寬度作為該待顯示子項對應的子項寬度；基于每個待顯示子項對應的子項寬度以及每個待顯示子項各自對應的子項間隔寬度對待顯示子項進行水平居中布局。

9、在一些實施例中，若確定顯示區域對應滑動窗口布局策略，基于布局策略，在顯示區域內顯示待顯示子項，包括：將每個待顯示子項各自對應的子項最小寬度作為該待顯示子項對應的子項寬度；基于每個待顯示子項對應的子項寬度以及每個待顯示子項各自對應的子項間隔寬度在顯示區域內顯示待顯示子項；其中，當監測到用戶的滑動指令時，根據滑動指令確定待顯示子項并對待顯示子項進行顯示。

10、在一些實施例中，基于每個待顯示子項對應的子項寬度以及每個待顯示子項各自對應的子項間隔寬度在顯示區域內顯示待顯示子項，包括：基于每個待顯示子項對應的子項寬度以及每個待顯示子項各自對應的子項間隔寬度在顯示區域內水平居左顯示待顯示子項。

11、根據本公開實施例的第二方面，提供一種界面的顯示裝置，包括：獲取模塊，用于獲取待顯示子項的配置參數、以及待顯示子項對應的顯示區域的顯示尺寸；確定模塊，用于基于待顯示子項的配置參數和顯示區域的顯示尺寸，確定與顯示區域對應的布局策略；顯示模塊，用于基于布局策略，在顯示區域內顯示待顯示子項。

12、在一些實施例中，確定模塊，還用于：獲取顯示區域的窗口實時寬度；基于窗口實時寬度，結合待顯示子項的配置參數，判斷所有待顯示子項能否在顯示區域內顯示完全；若監測到窗口實時寬度小于或者等于預設的寬度閾值，且，判斷所有待顯示子項能在顯示區域內顯示完全，則確定顯示區域對應第一布局策略；若監測到窗口實時寬度大于寬度閾值，且，判斷所有待顯示子項能在顯示區域內顯示完全，則確定顯示區域對應第二布局策略；若判斷所有待顯示子項不能在顯示區域內顯示完全，則確定顯示區域對應滑動窗口布局策略。

13、在一些實施例中，若確定顯示區域對應第一布局策略，顯示模塊，還用于：基于待顯示子項的配置參數，獲取位于顯示區域內的每個待顯示子項各自對應的子項間隔寬度之和，以及，獲取位于顯示區域內的子項總個數；獲取窗口實時寬度與子項間隔寬度之和的差值，并將該差值作為子項可用總寬度；判斷每個待顯示子項各自對應的子項最小寬度是否相同；根據判斷結果，基于子項可用總寬度、每個待顯示子項各自對應的子項最小寬度和子項總個數，在顯示區域內顯示待顯示子項。

14、在一些實施例中，若確定顯示區域對應第一布局策略，顯示模塊，還用于：若判斷結果指示每個待顯示子項各自對應的子項最小寬度均相同，則基于子項總個數對子項可用總寬度進行平均劃分，將平均劃分后得到的寬度作為每個待顯示子項對應的子項寬度；基于每個待顯示子項對應的子項寬度以及每個待顯示子項各自對應的子項間隔寬度在顯示區域內顯示待顯示子項。

15、在一些實施例中，若確定顯示區域對應第一布局策略，顯示模塊，還用于：若判斷結果指示每個待顯示子項各自對應的子項最小寬度存在不同，則基于每個待顯示子項各自對應的子項最小寬度對子項可用總寬度進行非均勻劃分，獲取每個待顯示子項對應的子項寬度；基于每個待顯示子項對應的子項寬度以及每個待顯示子項各自對應的子項間隔寬度在顯示區域內顯示待顯示子項。

16、在一些實施例中，若確定顯示區域對應第一布局策略，顯示模塊，還用于：獲取子項可用總寬度與子項總個數的比值作為第一比值；針對任一待顯示子項，將該待顯示子項對應的子項最小寬度與第一比值進行對比，若該待顯示子項對應的子項最小寬度大于第一比值，則將該待顯示子項對應的子項最小寬度作為該待顯示子項對應的子項寬度；獲取待顯示子項最小寬度大于第一比值的所有待顯示子項各自對應的子項最小寬度的寬度和，并獲取子項總寬度與寬度和的差值作為剩余子項可用寬度；將子項最小寬度小于或者等于第一比值的待顯示子項作為剩余待顯示子項，獲取剩余待顯示子項的個數作為剩余待顯示子項個數；獲取剩余子項可用寬度和剩余待顯示子項個數的比值作為第二比值；針對任一剩余待顯示子項，將該剩余待顯示子項對應的子項最小寬度與第二比值進行對比，若每個剩余待顯示子項的子項最小寬度均小于第二比值，則將第二比值作為每個剩余待顯示子項對應的子項寬度。

17、在一些實施例中，若確定顯示區域對應第二布局策略，顯示模塊，還用于：將顯示區域內的每個待顯示子項各自對應的子項最小寬度作為該待顯示子項對應的子項寬度；基于每個待顯示子項對應的子項寬度以及每個待顯示子項各自對應的子項間隔寬度對待顯示子項進行水平居中布局。

18、在一些實施例中，若確定顯示區域對應滑動窗口布局策略，顯示模塊，還用于：將每個待顯示子項各自對應的子項最小寬度作為該待顯示子項對應的子項寬度；基于每個待顯示子項對應的子項寬度以及每個待顯示子項各自對應的子項間隔寬度在顯示區域內顯示待顯示子項；其中，當監測到用戶的滑動指令時，根據滑動指令確定待顯示子項并對待顯示子項進行顯示。

19、在一些實施例中，若確定顯示區域對應第一布局策略，顯示模塊，還用于：基于每個待顯示子項對應的子項寬度以及每個待顯示子項各自對應的子項間隔寬度在顯示區域內水平居左顯示待顯示子項。

20、根據本公開實施例的第三方面，提出了一種電子設備，包括：至少一個處理器；以及與至少一個處理器通信連接的存儲器；其中，存儲器存儲有可被至少一個處理器執行的指令，指令被至少一個處理器執行，以實現如本技術第一方面實施例的界面的顯示方法。

21、根據本公開實施例的第四方面，提出了一種存儲有計算機指令的非瞬時計算機可讀存儲介質，其中，所述計算機指令用于實現如本技術第一方面實施例所述的界面的顯示方法。

22、根據本公開實施例的第五方面，提出了一種計算機程序產品，包括計算機程序，所述計算機程序在被處理器執行時實現如本技術第一方面實施例所述的界面的顯示方法。

23、本公開的實施例提供的技術方案至少帶來以下有益效果：

24、本技術根據待顯示子項的配置參數和所述顯示區域的顯示尺寸，動態選擇合適的布局策略，可以適應不同屏幕尺寸和容器尺寸的變化，使得用戶界面能夠在各種環境下自適應并保持良好的展示效果，保證視覺連續。

25、應當理解的是，以上的一般描述和后文的細節描述僅是示例性和解釋性的，并不能限制本公開。