问题描述
我正在尝试使用 DropdownButton 构建一个国家选择小部件,该小部件可以在任何地方使用,例如与其他小部件(例如标签)在 Row 中。但是当屏幕宽度太小时,我会出现渲染溢出错误。 Flutter 不能使用省略号或只是剪切文本。
以下代码最好在网络中进行测试。只需将浏览器变小即可查看问题。我尝试了 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 flag ,它应该代表一个标志图像,所以这个可以有一个固定的大小,但如果有,名字应该用省略号剪掉空间不足。
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);
}