引入一个表单相关布局组件 Review by Loki

lib/components/form_layout_relevant/title_filed_compenent.dart

@@ -0,0 +1,77 @@
+import 'package:fis_ui/index.dart';
+import 'package:flutter/material.dart';
+
+class FTitleField extends StatelessWidget implements FWidget {
+  ///标题
+  final String title;
+
+  ///字段值
+  final FWidget field;
+
+  ///标题和字段之间的空隙尺寸
+  late double sizeBetween;
+
+  ///字段后的空隙尺寸
+  late double sizeAfter;
+
+  ///字段最大宽度（Title为固定字符串，因此不设置最大宽度）
+  late double maxLargeFieldWidth;
+
+  ///是否是必填项
+  late bool isRequiredField;
+  FTitleField(
+    this.title,
+    this.field, {
+    Key? key,
+    this.sizeBetween = 5,
+    this.sizeAfter = 10,
+    this.maxLargeFieldWidth = 210,
+    this.isRequiredField = false,
+  }) : super(key: key);
+  @override
+  FWidget build(BuildContext context) {
+    var title = _buildTitle();
+    var children = <FWidget>[
+      title,
+      FSizedBox(
+        width: sizeBetween,
+      ),
+      FConstrainedBox(
+        constraints: BoxConstraints(maxWidth: maxLargeFieldWidth),
+        child: field,
+      ),
+      FSizedBox(
+        width: sizeAfter,
+      ),
+    ];
+    return _buildAutoSizedBox(children);
+  }
+
+  FWidget _buildAutoSizedBox(List<FWidget> children) {
+    return FConstrainedBox(
+      constraints: BoxConstraints(),
+      child: FRow(
+        children: children,
+      ),
+    );
+  }
+
+  FWidget _buildTitle() {
+    return FText.rich(
+      TextSpan(children: [
+        TextSpan(
+          text: title,
+          style: TextStyle(fontWeight: FontWeight.bold),
+        ),
+        if (isRequiredField) ...[
+          TextSpan(
+            text: ' *',
+            style: TextStyle(color: Colors.red),
+          )
+        ] else ...[
+          TextSpan(text: '')
+        ]
+      ]),
+    );
+  }
+}

lib/index.dart

@@ -2,3 +2,4 @@ library fis_lib_business_components;
 
 export 'components/picture_components.dart';
 export 'components/tooltip_compontents.dart';
+export 'components/form_layout_relevant/title_filed_compenent.dart';