Flutter表单构建插件bform的使用

Bform

用于帮助你创建漂亮的表单组件的插件。

特性

• 应用栏（appbar）
• 底部栏（footer）
• 表单组件
• 表格组件

开始使用

步骤 2: 在你的pubspec.yaml文件中添加bform作为依赖项：

dependencies:
  bform:

步骤 3: 在dart文件中导入包：

import 'package:bform/bform.dart';

使用示例

以下是一个完整的示例，展示了如何使用bform插件创建一个包含文本输入框、复选框、单选按钮、按钮和表格的表单。

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

import 'borm_obj_impl.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: BformAppbar(
          title: 'Bform Example',
          color: Colors.blueGrey,
          icon: Icons.menu,
        ),
        body: SafeArea(child: MyApp()),
      ),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool checkActive = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        children: [
          BformForm(
            height: 150,
            padding: 8,
            color: Colors.grey,
            width: MediaQuery.of(context).size.width - 20,
            border: Border.all(color: Colors.red),
            child: Column(
              children: [
                const BformTextInput(
                  label: '输入示例',
                  hintText: '提示文字示例',
                ),
                const SizedBox(height: 30),
                BformCheckbox(
                  initialState: checkActive,
                  label: '复选框',
                  onChange: (value) {
                    checkActive = value;
                  },
                ),
                const SizedBox(height: 30),
                BformGroupRadio(
                  label: '选择标题',
                  listItems: const [
                    BformObjImpl(1),
                    BformObjImpl(2),
                    BformObjImpl(3),
                  ],
                  item: const BformObjImpl(1),
                  onChange: (_) {},
                  color: Colors.orange,
                ),
                const SizedBox(height: 30),
                BformDivider(),
                const SizedBox(height: 30),
                Align(
                  alignment: Alignment.centerRight,
                  child: BformButton(
                    onPressed: () {
                      setState(() {
                        checkActive = !checkActive;
                      });
                    },
                    icon: Icons.notifications,
                    fontSize: 16,
                    colors: [Colors.green, Colors.yellow, Colors.red],
                    style: BformButtonStyle.highlighted,
                    label: ('示例按钮'),
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 30),
          BformDivider(),
          const SizedBox(height: 30),
          BformTableText(
            titles: const ['标题1', '标题2'],
            actionButtons: const [
              Icon(Icons.add),
              Icon(Icons.delete),
              Icon(Icons.edit),
            ],
            listElements: [
              ['元素1-1', '元素1-2'],
              ['元素2-1', '元素2-2'],
              ['元素3-1', '元素3-2'],
            ],
          ),
        ],
      ),
    );
  }
}