簡體   English   中英

如何在 Flutter 中為 PopupMenu 添加圓角邊框?

[英]How to add rounded border for PopupMenu in Flutter?

有什么方法可以創建帶有圓形邊框的自定義彈出窗口? 這是我當前的代碼和設計:

                child: Container(
                 child: PopupMenuButton(
                   onSelected: _savedLocationOptionSelected,
                   itemBuilder: (context) {
                     return SavedLocationOptions.choises.map((value) {
                       return PopupMenuItem<String>(
                         value: value,
                         child: Text(value),
                       );
                     }).toList();
                   },
                   icon: Icon(
                     Icons.more_vert,
                     color: Colors.grey[300],
                   ),
                 ),
               ),

在此處輸入圖片說明

您只需在 PopupMenuButton 上添加這樣的內容
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),

例子

   PopupMenuButton(
      child: Text("Show Popup Menu"),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(15.0))
      ),
      itemBuilder: (context) => [
        PopupMenuItem(
          child: Text("pub.dev"),
        ),
        PopupMenuItem(
          child: Text("Flutter"),
        ),
        PopupMenuItem(
          child: Text("Google.com"),
        ),
        PopupMenuItem(
          child: Text("https://blogdeveloperspot.blogspot.com"),
        ),
      ],
    ),

另一種簡單的方法是:

shape: ContinuousRectangleBorder(
         borderRadius: BorderRadius.circular(30),
       ),

添加到@Taz 給出的答案中,您可以使用主題在一個地方設置每個彈出窗口中的圓角:

MaterialApp(
  // ....
  theme: ThemeData(
  // ....
  popupMenuTheme: PopupMenuThemeData(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))
  )
)

在代碼中的“PopupMenuButton”上單擊右鍵,然后將其粘貼到“PopupMenu”命名的頁面中,並將此鏈接中的代碼粘貼到 Dart 文件

然后訪問此鏈接: 在此處輸入圖片說明 https://github.com/mohamedashraf8850/flutter/edit/master/packages/flutter/lib/src/material/popup_menu.dart

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM