繁体   English   中英

Flutter - DropdownMenuItem 中的文本溢出

[英]Flutter - Text overflow in DropdownMenuItem

我正在尝试使用 DropdownButton 构建一个国家选择小部件,该小部件可以在任何地方使用,例如与其他小部件(例如标签)在 Row 中。 但是当屏幕宽度太小时,我会出现渲染溢出错误。 Flutter 无法使用省略号或仅剪切文本。

以下代码最好在 web.xml 中测试。 只需将浏览器变小即可查看问题。 我尝试了Flutter 中的所有提示- DropdownButton 溢出,但都没有奏效。

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);
}


浏览器输出: 在此处输入图片说明

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM