如何更好地包含展开的 DropdownButtonFormField？

Question

由于一些要求，我需要在我的应用程序上支持大文本大小。因此，我对包含长文本的

DropdownButtonFormField

遇到了一些问题。我能够使用

isExpanded: true

修复正确的溢出，但现在的问题是，我认为

DropdownButtonFormField

并不真正知道如何正确处理

isExpanded: true

。这是我的

DropdownButtonFormField

目前的样子：

这是我的代码的样子：

ConstrainedBox(
    constraints: BoxConstraints(
       minHeight: 70.0,
     ),,
    child: DecoratedBox(
      decoration: CustomViewStyle.textBoxDecoration,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: DropdownButtonFormField<PermitCertificateType>(
            isExpanded: true,
            style: CustomTextStyle.textBoxTextStyle,
            value: widget.permitCertificateRecord?.permitCertificateType,
            decoration: InputDecoration(
                hintText: 'Permit/Certificate Type',
                hintStyle: CustomTextStyle.dropdownHintTextStyle,
                errorStyle: CustomTextStyle.errorStyle
            ),
            hint: Text("Permit/Certificate Type",
              style: CustomTextStyle.adapterTextTextStyle,),
            items: snapshot.data!.map((PermitCertificateType value) {
              return DropdownMenuItem<PermitCertificateType>(
                value: value,
                child: Wrap(
                    children: [
                      Text(value.name,
                        style: CustomTextStyle.textBoxTextStyle,),
                    ]
                ),
              );
            }).toList(),
            validator: (value) {
              if (value == null) {
                return 'Missing Permit/Certificate Type';
              }
              return null;
            },
            onChanged: (text) async {
              
            },
            onSaved: (value) {
              _permitCertificateTypeId = value!.id;
            },
          ),
      ),
    ),
  ),

itemHeight

没有帮助，因为它只影响下拉列表本身的项目，而不影响选择项目后或设置初始值时显示的项目。

Answer 1

我强烈建议使用此代码。在这里，我通过初步检查文本是否溢出来管理短文本和长文本。如果选项较短且没有溢出，则按原样显示；否则，它将显示为旋转文本（又名选框文本）。

对于旋转文本（又名选框文本），我使用这个包：https://pub.dev/packages/text_marquee

import "package:flutter/material.dart";
import "package:marquee/marquee.dart";

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final List<String> options = <String>[
    "Short Answer 1",
    "Short Answer 2",
    "Very Very Very Very Very Very Very Very Very Very Long Answer 3",
    "Very Very Very Very Very Very Very Very Very Very Long Answer 4",
  ];

  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            DropdownButtonFormField<String?>(
              isExpanded: true,
              value: selectedValue,
              items: options.map(
                (String value) {
                  return DropdownMenuItem<String?>(
                    value: value,
                    child: LayoutBuilder(
                      builder: (
                        BuildContext context,
                        BoxConstraints constraints,
                      ) {
                        return SizedBox(
                          height: kToolbarHeight / 2,
                          width: constraints.maxWidth,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: _overflowing(
                              text: value,
                              maxWidth: constraints.maxWidth,
                            )
                                ? Marquee(
                                    text: value,
                                    blankSpace: constraints.maxWidth / 3,
                                    pauseAfterRound: const Duration(seconds: 3),
                                  )
                                : Text(value),
                          ),
                        );
                      },
                    ),
                  );
                },
              ).toList(),
              onChanged: (String? value) {
                selectedValue = value;
                setState(() {});
              },
            ),
          ],
        ),
      ),
    );
  }

  bool _overflowing({required String text, required double maxWidth}) {
    final TextPainter textPainter = TextPainter(
      text: TextSpan(text: text),
      maxLines: 1,
      textDirection: TextDirection.ltr,
    )..layout(maxWidth: maxWidth);
    final bool didExceedMaxLines = textPainter.didExceedMaxLines;
    return didExceedMaxLines;
  }
}