Parcourir la source

1、封装配置项的组件

bakamaka.guan il y a 2 ans
Parent
commit
076d279d31

+ 39 - 0
lib/components/form_relevant/input_component.dart

@@ -0,0 +1,39 @@
+import 'package:fis_ui/index.dart';
+import 'package:fis_ui/values/font_sizes.dart';
+import 'package:flutter/material.dart';
+
+/// 输入的封装
+class FFromInput extends FStatelessWidget {
+  /// [sourceList] 数据源
+  final List<FSelectModel> sourceList;
+
+  /// [hintText] 选择提示文本
+  final String hintText;
+
+  /// [suffixIcon] 右侧图标组件
+  final FWidget? suffixIcon;
+
+  /// [onChanged] 选中变更事件
+  final Function(String?)? onChanged;
+  FFromInput({
+    Key? key,
+    required this.sourceList,
+    required this.hintText,
+    this.onChanged,
+    this.suffixIcon,
+  }) : super(key: key);
+
+  @override
+  FWidget build(BuildContext context) {
+    return FBorderInput(
+      hintSize: FFontSizes.BODY,
+      contentSize: FFontSizes.BODY,
+      hintText: hintText,
+      maxLength: 20,
+      borderColor: const Color.fromRGBO(234, 234, 234, 1),
+      suffixIcon: suffixIcon,
+      height: 38,
+      onChanged: (value) => onChanged!(value),
+    );
+  }
+}

+ 38 - 0
lib/components/form_relevant/select_component.dart

@@ -0,0 +1,38 @@
+import 'package:fis_ui/index.dart';
+import 'package:flutter/material.dart';
+
+/// 选择框的封装
+class FFromSelect extends FStatelessWidget {
+  /// [sourceList] 数据源
+  final List<FSelectModel> sourceList;
+
+  /// [hintText] 选择提示文本
+  final String hintText;
+
+  /// [value] 已选值
+  final String? value;
+
+  /// [onSelectChanged] 选中变更事件
+  final Function(String?, int?)? onSelectChanged;
+  FFromSelect({
+    Key? key,
+    required this.sourceList,
+    required this.hintText,
+    this.value,
+    this.onSelectChanged,
+  }) : super(key: key);
+
+  @override
+  FWidget build(BuildContext context) {
+    return FSelect<FSelectModel, String>(
+      source: sourceList,
+      hintText: hintText,
+      value: value,
+      clearable: true,
+      height: 36,
+      optionLabelExtractor: (data) => data.name,
+      optionValueExtractor: (data) => data.code,
+      onSelectChanged: (value, index) => onSelectChanged!(value, index),
+    );
+  }
+}

+ 0 - 0
lib/components/form_layout_relevant/title_filed_compenent.dart → lib/components/form_relevant/title_filed_compenent.dart


+ 33 - 0
lib/components/from_configure_components/configure_input.dart

@@ -0,0 +1,33 @@
+import 'package:fis_ui/index.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+/// 配置项的输入框
+class FConfigureInput extends FStatelessWidget {
+  final String? hintText;
+  final List<TextInputFormatter>? inputFormatters;
+  final TextEditingController? textController;
+  final ValueCallback? onChanged;
+
+  FConfigureInput({
+    this.hintText,
+    this.inputFormatters,
+    this.textController,
+    this.onChanged,
+  });
+
+  @override
+  FWidget build(BuildContext context) {
+    return FBorderInput(
+      hintSize: 16,
+      contentSize: 16,
+      maxLength: 20,
+      height: 40,
+      hintText: hintText,
+      inputFormatters: inputFormatters,
+      borderColor: Color(0xffdcdfe6),
+      onChanged: (value) => onChanged!(value),
+      controller: textController,
+    );
+  }
+}

+ 119 - 0
lib/components/from_configure_components/configure_layout.dart

@@ -0,0 +1,119 @@
+import 'package:fis_ui/index.dart';
+import 'package:flutter/material.dart';
+
+/// 配置项布局组件
+class FConfigureLayoutStyle extends InheritedWidget implements FWidget {
+  const FConfigureLayoutStyle({
+    key,
+    required this.child,
+    required this.width,
+  }) : super(child: child);
+  final double width;
+  final FWidget child;
+
+  static double? of(BuildContext context) {
+    final style =
+        context.dependOnInheritedWidgetOfExactType<FConfigureLayoutStyle>();
+    return style?.width;
+  }
+
+  @override
+  bool updateShouldNotify(covariant InheritedWidget oldWidget) {
+    return this.width != oldWidget.child;
+  }
+}
+
+class FConfigureLayout extends FStatelessWidget {
+  static const C_FONT_SIZE = 16.0;
+  static const C_PADDING_LEFT = 25.0;
+  static const C_PADDING_BOTTOM = 5.0;
+  static const C_FCONTAITNER_WIDTH = 125.0;
+  static const C_MARGIN_HORIZONTAL_SIZE = 15.0;
+  static const C_MARGIN_VERTICAL_SIZE = 20.0;
+
+  /// 标题
+  final String title;
+
+  /// 组件
+  final FWidget widget;
+
+  /// 比例
+  final double? proportion;
+
+  /// 是否必填
+  final bool? isRequired;
+
+  /// 是否显示标题
+  final bool? isShowTitle;
+
+  FConfigureLayout({
+    required this.title,
+    required this.widget,
+    this.proportion = 1,
+    this.isRequired = false,
+    this.isShowTitle = true,
+  });
+
+  @override
+  FWidget build(BuildContext context) {
+    final width = FConfigureLayoutStyle.of(context);
+    return FContainer(
+      width: proportion! * width!,
+      child: FRow(
+        mainAxisAlignment: MainAxisAlignment.spaceAround,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          FSizedBox(
+            width: 20,
+          ),
+          isShowTitle!
+              ? _buildTitle()
+              : FSizedBox(
+                  width: C_PADDING_LEFT,
+                ),
+          widget,
+        ],
+      ),
+    );
+  }
+
+  /// 构建标题
+  FWidget _buildTitle() {
+    final labelStyle = TextStyle(fontSize: C_FONT_SIZE);
+
+    return FContainer(
+      margin: EdgeInsets.symmetric(
+        vertical: C_MARGIN_VERTICAL_SIZE,
+        horizontal: C_MARGIN_HORIZONTAL_SIZE,
+      ),
+      width: C_FCONTAITNER_WIDTH,
+      height: 40,
+      alignment: Alignment.centerLeft,
+      child: FRow(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          FExpanded(
+            child: FText.rich(
+              TextSpan(
+                children: [
+                  TextSpan(
+                    text: title,
+                    style: labelStyle,
+                  ),
+                  if (isRequired!) ...[
+                    TextSpan(
+                      text: ' *',
+                      style: labelStyle.copyWith(color: Colors.red),
+                    )
+                  ] else ...[
+                    TextSpan(text: '')
+                  ]
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

+ 51 - 0
lib/components/from_configure_components/configure_select.dart

@@ -0,0 +1,51 @@
+import 'package:fis_i18n/i18n.dart';
+import 'package:fis_ui/index.dart';
+import 'package:flutter/material.dart';
+
+// class SelectModel {
+//   SelectModel({required this.name, required this.code});
+//   final String name;
+//   final String code;
+// }
+
+class FConfigureSelect extends FStatefulWidget {
+  static const C_SELECT_HEIGHT = 38.0;
+
+  final List<FSelectModel> source;
+  final ValueCallback onChanged;
+  String? value;
+  FConfigureSelect({
+    required this.source,
+    required this.onChanged,
+    this.value,
+  });
+
+  @override
+  FState<FConfigureSelect> createState() => _FConfigureSelectState();
+}
+
+class _FConfigureSelectState extends FState<FConfigureSelect> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  FWidget build(BuildContext context) {
+    // String selectedVal = controller.patientInfo[key] ?? '';
+    final select = FSelect<FSelectModel, String>(
+      source: widget.source,
+      hintText: i18nBook.remedical.select.t,
+      value: widget.value == '' ? null : widget.value,
+      clearable: true,
+      height: FConfigureSelect.C_SELECT_HEIGHT,
+      optionLabelExtractor: (data) => data.name,
+      optionValueExtractor: (data) => data.code,
+      onSelectChanged: (value, index) {
+        widget.onChanged(value);
+      },
+    );
+
+    return FExpanded(child: select);
+  }
+}

+ 54 - 0
lib/components/from_configure_components/configure_text_area.dart

@@ -0,0 +1,54 @@
+import 'package:fis_ui/index.dart';
+import 'package:flutter/material.dart';
+
+class FConfigureTextArea extends FStatefulWidget {
+  final TextEditingController textEditingController;
+  final ValueCallback onChanged;
+
+  FConfigureTextArea({
+    Key? key,
+    required this.textEditingController,
+    required this.onChanged,
+  }) : super(key: key);
+
+  @override
+  FState<FConfigureTextArea> createState() => _FConfigureTextAreaState();
+}
+
+class _FConfigureTextAreaState extends FState<FConfigureTextArea> {
+  @override
+  FWidget build(BuildContext context) {
+    return FExpanded(
+      child: FContainer(
+        margin: EdgeInsets.only(top: 15),
+        child: FTextField(
+          maxLines: 3,
+          maxLength: 100,
+          controller: widget.textEditingController,
+          onChanged: (val) {
+            widget.onChanged(val);
+          },
+          decoration: InputDecoration(
+            hintStyle: const TextStyle(
+              fontSize: 16,
+            ),
+            fillColor: Colors.white.withOpacity(0.5),
+            enabledBorder: const OutlineInputBorder(
+              borderSide: BorderSide(
+                color: Color.fromRGBO(230, 230, 230, 1),
+                style: BorderStyle.solid,
+              ),
+            ),
+            focusedBorder: const OutlineInputBorder(
+              borderSide: BorderSide(
+                width: 0.5,
+                style: BorderStyle.solid,
+              ),
+            ),
+            filled: true,
+          ),
+        ),
+      ),
+    );
+  }
+}

+ 6 - 1
lib/index.dart

@@ -2,4 +2,9 @@ library fis_lib_business_components;
 
 export 'components/picture_components.dart';
 export 'components/tooltip_compontents.dart';
-export 'components/form_layout_relevant/title_filed_compenent.dart';
+export 'components/form_relevant/title_filed_compenent.dart';
+export 'components/form_relevant/select_component.dart';
+export 'components/from_configure_components/configure_layout.dart';
+export 'components/from_configure_components/configure_input.dart';
+export 'components/from_configure_components/configure_select.dart';
+export 'components/from_configure_components/configure_text_area.dart';