如何在 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" 上单击右键,然后将其粘贴到 The Page will Opend Named By "PopupMenu" 并将此 Link 中的代码粘贴到 Dart 文件
然后访问此 Link:
https://github.com/mohamedashraf8850/flutter/edit/master/packages/flutter/lib/src/material/popup_menu.dart
您只需在 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))
)
)
有什么方法可以创建带有圆角边框的自定义弹出窗口吗? 这是我目前的代码和设计:
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" 上单击右键,然后将其粘贴到 The Page will Opend Named By "PopupMenu" 并将此 Link 中的代码粘贴到 Dart 文件
然后访问此 Link:
您只需在 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))
)
)