flutter - Flutter - DropdownMenuItem 中的文本溢出
问题描述
我正在尝试使用 DropdownButton 构建一个国家选择小部件,该小部件可以在任何地方使用,例如在带有其他小部件(例如标签)的行中。但是当屏幕宽度太小时,我会得到渲染溢出错误。Flutter 无法使用省略号或仅剪切文本。
以下代码最好在 web.xml 中进行测试。只需将浏览器缩小即可查看问题。我尝试了Flutter 的所有提示 - DropdownButton overflow,但没有一个奏效。
flutter --version
Flutter 2.2.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f4abaa0735 (4 weeks ago) • 2021-07-01 12:46:11 -0700
Engine • revision 241c87ad80
Tools • Dart 2.13.4
文件main.dart包含实例 var标志,它应该代表一个标志图像,因此这个标志可以具有固定的大小,但如果没有足够的空间,名称应该用省略号剪切。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<Country> countries = [
Country('FR', 'France'),
Country('GB', 'Great Britain'),
Country('AG', 'Antigua and Barbuda Islands')
];
String? flag = null;
Widget _buildDropdown() {
return DropdownButton<String>(
// isExpanded: true,
items: [
for (Country country in countries)
DropdownMenuItem(
value: country.flag,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
width: 30,
child: Text(country.flag),
),
// Expanded( child:
// Flexible( child:
Text(
country.name,
overflow: TextOverflow.ellipsis,
),
// ),
],
),
),
],
onChanged: (String? selectedFlag) => setState(() => flag = selectedFlag!),
value: flag,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Text overflow in Dropdown'),
),
body: Container(
width: 200,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildDropdown(),
Text('Selected $flag'),
],
),),),);}}
class Country {
String flag;
String name;
Country(this.flag, this.name);
}
解决方案
我们试试看
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<Country> countries = [
Country('FR', 'France'),
Country('GB', 'Great Britain'),
Country('AG', 'Antigua and Barbuda Islands Antigua and Barbuda IslandsAntigua and Barbuda Islands Antigua and Barbuda IslandsAntigua and Barbuda Islands, Antigua and Barbuda Islands')
];
String flag = null;
Widget _buildDropdown() {
return DropdownButton<String>(
isExpanded: true,
items: [
for (Country country in countries)
DropdownMenuItem(
value: country.flag,
child: Wrap(
children: [
SizedBox(
width: 30,
child: Text(country.flag),
),
Container(
constraints: new BoxConstraints(
minHeight: 20.0,
maxHeight: 20.0,
),
child: Text(
country.name,
),
),
],
),
),
],
onChanged: (String selectedFlag) => setState(() => flag = selectedFlag),
value: flag,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Text overflow in Dropdown'),
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildDropdown(),
Text('Selected $flag'),
],
),
),
);
}
}
class Country {
String flag;
String name;
Country(this.flag, this.name);
}
推荐阅读
- openlayers - 使用画布图案设计几何体的笔触
- python - 识别产品组合列表结果中每个元素的原始键
- django - 如何让 Django 在 UTC 中存储日期时间,但在管理员中以当地时间显示?
- javascript - 如何根据 Google Cloud Functions 上初始路径的参考值将节点克隆到另一个路径?
- regex - 正则表达式查找包含字符串的所有文本
- php - 如何使用 Telegram API 获取频道的活跃成员数?
- ios - 在 init 中:异构集合文字只能推断为 '[NSAttributedStringKey : Any]'
- json - Jmeter:重用和更改 Json 响应作为下一个请求的正文
- elasticsearch - Elasticsearch 平均每月用户点击次数
- html - 更改引导类给出的样式