Flutter文本适配容器插件fitted_text_field_container的使用

一个自动调整宽度以适应包含TextField文本值的Container。

使用

FittedTextFieldContainer

参数表

参数名	类型	默认值	描述
`child`	`TextField`	必需	需要适配的`TextField`
`calculator`	`CalculateFunction`	`FittedTextFieldCalculator.fitVisible`	计算宽度的函数。默认函数会适配可见内容及装饰（即当提示文字消失时，它会收缩到内容/标签的宽度）
`builder`	`Widget Function(BuildContext context, TextField child)`	`null`	可以用来构建复杂布局的生成器。生成器中提供`TextField`作为子组件

示例

FittedTextFieldContainer(
    child: TextField(
        controller: someTextEditingController,
        textAlign: TextAlign.right,
        decoration: InputDecoration(
            prefixText: "£",
            labelText: "Amount",
        ),
    ),
)

AnimatedFittedTextFieldContainer

所有来自FittedTextFieldContainer的参数，外加以下参数：

参数名	类型	默认值	描述
`growCurve`	`Curve`	`Curves.easeOutCirc`	容器在增长时使用的动画曲线
`growDuration`	`Duration`	`Duration(milliseconds: 300)`	当`TextField`增长时，容器宽度变化的持续时间
`shrinkCurve`	`Curve`	`Curves.easeInCirc`	容器在缩小过程中使用的动画曲线
`shrinkDuration`	`Duration`	`Duration(milliseconds: 600)`	当`TextField`缩小过程中，容器宽度变化的持续时间

示例

AnimatedFittedTextFieldContainer(
    growDuration: Duration(milliseconds: 300),
    shrinkDuration: Duration(milliseconds: 600),
    growCurve: Curves.easeOutCirc,
    shrinkCurve: Curves.easeInCirc,
    child: TextField(
        controller: someTextEditingController,
        textAlign: TextAlign.right,
        decoration: InputDecoration(
            prefixText: "£",
            labelText: "Amount",
        ),
    ),
)

FittedTextFieldMeasurer

一个类，接收TextField和TextStyle并返回以下测量值：

textField 适配后的TextField
textStyle 适配后的TextField的样式或默认样式
textWidth 文本内容的宽度
labelWidth 标签的宽度
hintWidth 提示文字的宽度
fixedWidths 固定元素（前缀文本、后缀文本、内容填充和光标宽度）的宽度

CalculateFunction

此函数接收测量值并返回一个宽度值。

签名

double CalculateFunction(FittedTextFieldMeasurer)

示例

FittedTextFieldContainer(
    calculator: (m) =>
        m.fixedWidths +
        max(m.labelWidth, max(m.hintWidth, m.textWidth)),
    child: TextField(
        controller: someTextEditingController,
        textAlign: TextAlign.right,
        decoration: InputDecoration(
            hintText: "Width of hint text",
        ),
    ),
);

预定义函数

一些计算器用于常见用例：

fitAll 适配内容、标签和提示文本
fitVisible 适配可见内容及装饰（即当提示文字消失时，它会收缩到内容/标签的宽度）
fitVisibleWithPadding(double padding) 在适配可见内容的基础上添加固定填充值
fitVisibleWithRange(double min, double max) 在适配可见内容的基础上强制最小和（可选）最大宽度

示例

适配所有

FittedTextFieldContainer(
    calculator: FittedTextFieldCalculator.fitAll,
    child: ...
);

适配可见内容并设置最小宽度

FittedTextFieldContainer(
    calculator: FittedTextFieldCalculator.fitVisibleWithRange(120),
    child: ...
);

适配可见内容并设置最大宽度

FittedTextFieldContainer(
    calculator: FittedTextFieldCalculator.fitVisibleWithRange(0, 180),
    child: ...
);

使用`builder`

AnimatedFittedTextFieldContainer(
    child: TextField(
        controller: someTextEditingController,
        textAlign: TextAlign.right,
        decoration: InputDecoration(
            labelText: "Twinkle twinkle",
        ),
    ),
    builder: (context, child) => Container(
        child: Stack(
            overflow: Overflow.visible,
            children: <Widget>[
                child,
                Positioned(
                    top: 0,
                    right: -22,
                    child: _aniWholePoundCtl.text.isEmpty
                        ? Icon(Icons.star_border)
                        : Icon(Icons.star, color: Colors.amber),
                ),
            ],
        ),
    ),
)

更多关于Flutter文本适配容器插件fitted_text_field_container的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼•4 天前

更多关于Flutter文本适配容器插件fitted_text_field_container的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，关于fitted_text_field_container这个Flutter插件的使用，下面是一个简单的代码示例，展示如何在Flutter应用中使用这个插件来实现文本适配容器的功能。

首先，确保你已经在pubspec.yaml文件中添加了fitted_text_field_container的依赖：

dependencies:
  flutter:
    sdk: flutter
  fitted_text_field_container: ^最新版本号  # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Dart文件中，你可以这样使用FittedTextFieldContainer：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FittedTextFieldContainer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('FittedTextFieldContainer Demo'),
        ),
        body: Center(
          child: FittedTextFieldContainer(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Enter Text',
            ),
            maxLength: 20,
            controller: TextEditingController(text: 'Hello, World!'),
            onSubmitted: (String value) {
              print('Submitted text: $value');
            },
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个FittedTextFieldContainer。这个容器会自动调整其内部文本字段的大小以适应其内容，同时保持文本的可读性。

decoration参数用于定义文本字段的装饰，比如边框和标签文本。
maxLength参数限制了用户可以输入的字符数。
controller参数是一个TextEditingController，用于管理文本字段的内容。在这个例子中，我们初始化时设置了一些默认文本。
onSubmitted回调在用户提交文本时被调用，例如当用户按下键盘的“完成”或“回车”键时。

FittedTextFieldContainer插件的主要特点是它可以根据父容器的大小自动调整文本字段的大小，这对于在不同屏幕尺寸和分辨率上保持UI的一致性非常有用。

请确保在实际使用中根据插件的文档和最新版本更新代码，因为API可能会有所变化。

Flutter文本适配容器插件fitted_text_field_container的使用

Flutter文本适配容器插件fitted_text_field_container的使用

使用

FittedTextFieldContainer

参数表

示例

AnimatedFittedTextFieldContainer

示例

FittedTextFieldMeasurer

CalculateFunction

签名

示例

预定义函数

示例

使用builder

使用`builder`