Flutter固定宽度布局插件fixedwidth的使用

Flutter固定宽度布局插件fixedwidth的使用

在Flutter中,如果你想要处理固定宽度文件(例如COBOL或某些旧系统中使用的文件),你可以使用fixedwidth插件。此库帮助你轻松创建一个Record布局,该布局清楚地描述了所需的布局大小和输出格式。你可以从固定宽度记录生成Dart对象,或者将Dart对象输出为固定宽度字符串。

使用

首先定义你的Record布局。注意类构造函数不继承,因此你需要在自己的Record定义中包含它们以获得fromString行为。

import 'package:intl/intl.dart';
import 'package:fixedwidth/fixedwidth.dart';

class PersonRecord extends Record {
  StringField firstName = StringField(20);
  StringField lastName = StringField(20);
  DateTimeField dob = DateTimeField(10, format: DateFormat("yyyy-MM-dd"));
  IntegerField numSiblings = IntegerField(2, defaultValue: 0);
  DecimalField amountDue = DecimalField(8, decimals: 2);

  PersonRecord();
  PersonRecord.fromString(String record) : super.fromString(record);
}

你可以创建一个Record,填充它,并将其转换为固定宽度字符串。

var record = PersonRecord()
  ..firstName.value = "John"
  ..lastName.value = "Doe"
  ..dob.value = DateTime(1980, 4, 16)
  ..numSiblings.value = 2
  ..amountDue.value = 24.75;
print(record.toString());
print("Total Record Length: ${record.length()}");

你也可以从固定宽度字符串中将其转换为适当的Dart对象。调用字段的value会给你一个带有类型化的Dart对象。

var record2 = PersonRecord.fromString(
  "Benjamin            Franklin            1706-01-171600003.00");
print(record2.firstName);
print(record2.lastName);
print(record2.dob.value);
print(record2.numSiblings.value);
print(record2.amountDue.value);

字段类型

StringField

这是最常见的字段。只是一个字符串,右填充到指定长度。

StringField name = StringField(15);

字符串表示形式:右填充到给定长度,例如:"Peter          "

Dart值:原始字符串赋值,例如:“Peter”

DateTimeField

DateTimeField用于日期或时间戳。你可以设置字段的期望输出格式以控制字符串输出。

DateTimeField completedDate = DateTimeField(10, format: DateFormat("yyyy-MM-dd"));

字符串表示形式:根据format格式化日期,例如:2018-03-16

Dart值:DateTime,例如:2018-03-16 14:53:02.030

IntegerField

IntegerField amount = IntegerField(5);

字符串表示形式:零填充整数,例如:00300

Dart值:int,例如:300

DecimalField

这是一个num类型,输出期望长度和小数位。值会在必要时被四舍五入以缩短小数精度。

DecimalField amount = DecimalField(8, decimals: 2);

字符串表示形式:零填充小数,例如:00300.50

Dart值:num,例如:300.50

ImpliedDecimalField

这是一种常见的COBOL程序,其中小数点在某个位置隐含,但不存在。

ImpliedDecimalField amount = ImpliedDecimalField(7, decimals: 2);

字符串表示形式:零填充小数,例如:0030075

Dart值:num,例如:300.75

SignedImpliedDecimalField

这与隐含小数字段相同,但有一个尾随符号来指示值是否为正或负。

SignedImpliedDecimalField amount = SignedImpliedDecimalField(8, decimals: 2);

字符串表示形式:例如:0030075-

Dart值:num,例如:-300.75

BooleanField

BooleanField isActive = BooleanField();

字符串表示形式:'Y''N'

Dart值:bool

NullBooleanField

这类似于BooleanField,但也可以为null。有时当值未设置或未知时使用。

NullBooleanField likesPizza = NullBooleanField();

字符串表示形式:'Y''N',或' '

Dart值:bool

ListField

ListField 类似于嵌套记录,但它是一个记录列表。这类似于COBOL的occurs功能。

class ItemRecord extends Record {
  StringField sku = StringField(10);
  IntegerField qty = IntegerField(2);
  DecimalField amount = StringField(9, decimals: 2);

  ItemRecord();
  ItemRecord.fromString(String record) : super.fromString(record);
}

class Transaction extends Record {
  ListField orderItems = ListField(record: ItemRecord, occurs: 25);
  
  Transaction();
  Transaction.fromString(String record) : super.fromString(record);
}

字符串表示形式:整个填充字符串的记录列表

Dart值:记录实例的列表

其他特性

defaultValue

每个字段类型接受一个defaultValue参数。字段的初始值是在实例化时设置为默认值的。

StringField name = StringField(10, defaultValue: "Peter");
print("'${name.value}'");
print("'${name.toString()}'");

打印结果:

'Peter'
'Peter     '

autoTruncate

如果要自动截断字符串值以适应必要的固定宽度长度(而不是抛出异常),可以设置autoTruncate = true

class MyRecord extends Record {
  bool autoTruncate = true;
  
  StringField description = StringField(10);
}

var record = MyRecord()
  ..description.value = "Pigeons are super cool";
print("'${record.description.value}'");
print("'${record.toString()}'");

打印结果:

'Pigeons are super cool'
'Pigeons ar'

嵌套记录

你可以在一个记录中嵌套另一个完整的记录。

class AddressRecord extends Record {
  StringField address = StringField(60);
  StringField city = StringField(30);
  StringField state = StringField(2);
  StringField postalCode = StringField(12);

  AddressRecord();
  AddressRecord.fromString(String record) : super.fromString(record);
}

class Transaction extends Record {
  AddressRecord billingAddress = AddressRecord();
  AddressRecord shippingAddress = AddressRecord();
  
  Transaction();
  Transaction.fromString(String record) : super.fromString(record);
}

var txn = Transaction()
  ..billingAddress.address.value = "PO Box 255"
  ..billingAddress.city.value = "Des Moines"
  ..billingAddress.state.value = "IA"
  ..billingAddress.postalCode.value = "50306"
  ..shippingAddress.address.value = "123 1st St"
  ..shippingAddress.city.value = "West Des Moines"
  ..shippingAddress.state.value = "IA"
  ..shippingAddress.postalCode.value = "50266";

更多关于Flutter固定宽度布局插件fixedwidth的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter固定宽度布局插件fixedwidth的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_fixedwidth 是 Flutter 中一个比较小众的插件,用于处理固定宽度的布局和组件。它的主要用途是确保在构建 UI 时,某些组件的宽度是固定的,从而避免因屏幕大小或内容变化而导致的布局问题。

1. 安装插件

首先,你需要在 pubspec.yaml 文件中添加 flutter_fixedwidth 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_fixedwidth: ^0.0.1  # 请检查最新版本号

然后运行 flutter pub get 来安装插件。

2. 使用 FixedWidth 组件

FixedWidthflutter_fixedwidth 插件中的主要组件,它允许你为子组件设置固定的宽度。

基本用法

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FixedWidth Example'),
        ),
        body: Center(
          child: FixedWidth(
            width: 200.0,
            child: Container(
              color: Colors.blue,
              child: Text(
                'Fixed Width Container',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中,FixedWidth 组件将其子组件(一个蓝色的 Container)的宽度固定为 200.0,无论屏幕大小如何变化,这个宽度都不会改变。

自定义子组件

你可以在 FixedWidth 中放置任何子组件,例如按钮、图片等:

FixedWidth(
  width: 150.0,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Fixed Width Button'),
  ),
)

3. 其他特性

flutter_fixedwidth 还提供了一些其他特性,比如 FixedHeightFixedSize 等组件,用于固定组件的高度或同时固定宽度和高度。

固定高度

FixedHeight(
  height: 100.0,
  child: Container(
    color: Colors.green,
    child: Center(
      child: Text('Fixed Height Container'),
    ),
  ),
)

固定宽度和高度

FixedSize(
  width: 150.0,
  height: 100.0,
  child: Container(
    color: Colors.red,
    child: Center(
      child: Text('Fixed Size Container'),
    ),
  ),
)
回到顶部