Flutter自适应文本大小插件auto_size_text_field的使用

简介

AutoSizeTextField 是一个Flutter包，它允许 TextField 小部件根据其内容自动调整字体大小以完美地适应其边界。该插件对于创建响应式用户界面非常有用，特别是在处理不同屏幕尺寸和输入长度变化的情况下。

版本与兼容性

• 版本: v2.2.4 (适用于Flutter v3及以上)
• 许可协议: MIT License
• 重要提示:
  • 对于Flutter v3.3及以上版本，已弃用 toolbarOptions 参数，并增加了对 ContextMenuBuilder 的支持。
  • 如果您的项目依赖于 toolbarOptions，请考虑使用 2.1.1 版本。

使用方法

AutoSizeTextField 的行为与标准的 TextField 相同，唯一的区别是它可以动态调整字体大小以确保文本始终适应其容器。下面是一些关键属性及其用法：

示例代码

import 'package:auto_size_text_field/auto_size_text_field.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auto Size TextField Example',
      theme: ThemeData(
        primarySwatch: Colors.amber,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Auto Size TextField Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _textEditingControllerOne = TextEditingController();
  TextEditingController _textEditingControllerTwo = TextEditingController();
  TextEditingController _textEditingControllerThree = TextEditingController();
  TextEditingController _textEditingControllerFour = TextEditingController();
  TextEditingController _textEditingControllerFive = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(height: 48),
              Text('Fixed width (full width of parent\'s BoxConstraints)'),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: AutoSizeTextField(
                  controller: _textEditingControllerOne,
                  minFontSize: 24,
                  style: TextStyle(fontSize: 64),
                ),
              ),
              SizedBox(height: 48),
              Text('Auto adjusted width based on contents'),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: AutoSizeTextField(
                  textAlign: TextAlign.center,
                  fullwidth: false,
                  controller: _textEditingControllerTwo,
                  minFontSize: 24,
                  style: TextStyle(fontSize: 64),
                ),
              ),
              SizedBox(height: 48),
              Text('Auto adjusted width with hintText and minWidth'),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: AutoSizeTextField(
                  controller: _textEditingControllerThree,
                  decoration: InputDecoration(hintText: 'Hint Text'),
                  fullwidth: false,
                  minFontSize: 24,
                  minWidth: 280,
                  style: TextStyle(fontSize: 64),
                  textAlign: TextAlign.center,
                ),
              ),
              SizedBox(height: 48),
              Text('Auto adjusted width with prefix and suffix text'),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: AutoSizeTextField(
                  minWidth: 100,
                  controller: _textEditingControllerFour,
                  decoration: InputDecoration(
                    prefixText: '\$',
                    suffixText: '😁',
                  ),
                  fullwidth: false,
                  minFontSize: 24,
                  style: TextStyle(fontSize: 64),
                  textAlign: TextAlign.center,
                ),
              ),
              SizedBox(height: 48),
              Text('Multi-line text with input padding'),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 24.0),
                child: Container(
                  constraints: BoxConstraints(
                    maxHeight: 200,
                    maxWidth: 300,
                  ),
                  decoration: BoxDecoration(
                    border: Border.all(width: 2, color: Colors.amber),
                  ),
                  child: AutoSizeTextField(
                    controller: _textEditingControllerFive,
                    fullwidth: false,
                    minFontSize: 0,
                    maxLines: null,
                    style: TextStyle(fontSize: 50),
                    textAlignVertical: TextAlignVertical.center,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      isDense: true,
                      contentPadding: const EdgeInsets.all(20),
                    ),
                    keyboardType: TextInputType.multiline,
                  ),
                ),
              ),
              TextButton(
                onPressed: () {
                  _textEditingControllerFive.clear();
                },
                child: Text('Clear'),
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _textEditingControllerOne.dispose();
    _textEditingControllerTwo.dispose();
    _textEditingControllerThree.dispose();
    _textEditingControllerFour.dispose();
    _textEditingControllerFive.dispose();
    super.dispose();
  }
}

关键参数说明

性能优化

为了提高性能，请避免设置过大的初始字体大小。例如，不要将 fontSize 设置为 1000，除非确实需要。如果字体大小范围较大，可以适当增加 stepGranularity 来减少调整次数。

常见问题及解决方案

缺失边界约束

如果 AutoSizeTextField 没有正确调整文本大小或发生溢出，可能是由于缺少边界约束。可以通过将 AutoSizeTextField 包裹在 Expanded 或 SizedBox 中来解决此问题。

minFontSize 过大

AutoSizeTextField 不会调整文本到小于 minFontSize 的值，默认为12。如果需要更小的字体，请调整此参数。

通过上述内容，您可以轻松集成并使用 AutoSizeTextField 来创建更加灵活和美观的用户界面。希望这些信息对您有所帮助！