### Weak Guidance Mode Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/guide/BrnGuide/BrnGuide.md

Demonstrates how to implement the BrnGuide component in weak guidance mode. This snippet initializes the guide with a specified number of steps and custom tip information, then starts the guide after a short delay. It includes various UI elements like app bars, tag widgets, buttons, and text, each associated with a guide step.

```dart
class SoftGuideDemo extends StatefulWidget {
  SoftGuideDemo({Key key}) : super(key: key);

  @override
  _SoftGuideDemoState createState() => _SoftGuideDemoState();
}

class _SoftGuideDemoState extends State<SoftGuideDemo> {
  BrnGuide intro;

  _SoftGuideDemoState() {
    /// init Guide
    intro = BrnGuide(
      stepCount: 7,
      introMode: GuideMode.soft,

      /// use defaultTheme, or you can implement widgetBuilder function yourself
      widgetBuilder: StepWidgetBuilder.useDefaultTheme(
        tipInfo: [
          BrnTipInfoBean("标题栏", "这里是标题栏，显示当前页面的名称", ""),
          BrnTipInfoBean("标签组件", "这里是标签组件，你可以动态添加或者删除组件，当你点击后会将结果给你回传", ""),
          BrnTipInfoBean("左边的按钮", "这里是按钮，点击他试试", ""),
          BrnTipInfoBean("右边的按钮", "这里是按钮，点击他试试", ""),
          BrnTipInfoBean("左边的文本 ", "这是一个朴实无华的文本", ""),
          BrnTipInfoBean("右边文本 ", "这是一个枯燥文本", ""),
          BrnTipInfoBean("开始按钮 ", "点击开启引导动画", ""),
        ],
      ),
    );
  }

  List<String> nameList = [
    '这是一条很长很长很长很长很长很长很长很长很长很长的标签',
    '标签么么么么么',
    '标签么么没没没么么么',
    '标签么么么么么',
    '标签么么么么么'
  ];

  @override
  void initState() {
    super.initState();
    Timer(Duration(microseconds: 0), () {
      /// start the intro
      intro.start(context);
    });
  }

  Widget build(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
        appBar: BrnAppBar(
          brightness: Brightness.light,
          title: Text(
            '弱引导组件demo',
            key: intro.keys[0],
            style: TextStyle(color: Colors.black),
          ),
        ),
        body: SingleChildScrollView(
          child: Container(
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'BrnSelectTagWidget',
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                ),
                Text(
                  '流式布局的自适应标签(最小宽度75)',
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                ),
                SizedBox(
                  height: 10,
                ),
                BrnSelectTag(
                    key: intro.keys[1],
                    tagNameList: nameList,
                    tagWidth: (MediaQuery.of(context).size.width - 40 - 24) / 3,
                    fixWidthMode: false,
                    onSelect: (index) {
                      BrnToast.show("$index is selected", context);
                    }),
                SizedBox(
                  height: 16,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    RaisedButton(
                      key: intro.keys[2],
                      onPressed: () {},
                      child: Text("需求1"),
                    ),
                    RaisedButton(
                      key: intro.keys[3],
                      onPressed: () {},
                      child: Text("需求2"),
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Container(
                      width: 14,
                      padding: EdgeInsets.only(top: 20),
                      alignment: Alignment.center,
                      child: Text(
                        '左边的文字',
                        key: intro.keys[4],
                      ),
                    ),
                    Container(
                      width: 14,
                      padding: EdgeInsets.only(top: 20),
                      alignment: Alignment.center,
                      child: Text(
                        '右边的文字',
                        key: intro.keys[5],
                      ),
                    )
                  ],
                ),
                SizedBox(
                  height: 16,
                ),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          key: intro.keys[6],

          /// 1st guide
          child: Icon(
            Icons.play_arrow,
          ),
          onPressed: () {
            intro.start(context);
          },
        ),
      ),
      onWillPop: () async {
        // destroy guide page when tap back key
        intro.dispose();
        return true;
      },
    );
  }
}

```

--------------------------------

### BrnFlatSelection Code Examples

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/selection/BrnFlatSelection/BrnFlatSelection.md

Demonstrates how to use the BrnFlatSelection component with different configurations.

```APIDOC
### Effect 1

```dart
BrnFlatSelection(
  entityDataList: widget._filterData,
  confirmCallback: (data) {
    String str = '';
    data.forEach((k, v) => str=str +" "+'${k}: ${v}');
    BrnToast.show(str, context);
  },
  controller: controller)
```

### Effect 2

```dart
BrnFlatSelection(
  preLineTagSize: 4,
  entityDataList: widget._filterData,
  confirmCallback: (data) {
    String str = '';
    data.forEach((k, v) => str=str +" "+'${k}: ${v}');
    BrnToast.show(str, context);
  },
  controller: controller)
```
```

--------------------------------

### Basic Style Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnTextSelectFormItem/BrnTextSelectFormItem.md

Demonstrates the basic usage of BrnTextSelectFormItem with title and various callback functionalities.

```APIDOC
## Basic Style

### Code Example

```dart
BrnTextSelectFormItem(
  title: "证件类型",
  onTip: () {
    BrnToast.show("点击触发onTip回调", context);
  },
  onAddTap: () {
    BrnToast.show("点击触发onAddTap回调", context);
  },
  onRemoveTap: () {
    BrnToast.show("点击触发onRemoveTap回调", context);
  },
  onTap: () {
    BrnToast.show("点击触发回调_onTap", context);
  },
)
```
```

--------------------------------

### Basic BrnTextSelectFormItem Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnTextSelectFormItem/BrnTextSelectFormItem.md

Demonstrates a basic usage of BrnTextSelectFormItem with title and callback functions.

```dart
BrnTextSelectFormItem(
  title: "证件类型",
  onTip: () {
    BrnToast.show("点击触发onTip回调", context);
  },
  onAddTap: () {
    BrnToast.show("点击触发onAddTap回调", context);
  },
  onRemoveTap: () {
    BrnToast.show("点击触发onRemoveTap回调", context);
  },
  onTap: () {
    BrnToast.show("点击触发回调_onTap", context);
  },
),
```

--------------------------------

### Basic BrnTitleFormItem Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnTitleFormItem/BrnTitleFormItem.md

Demonstrates a basic BrnTitleFormItem with a title and an operation label. Callbacks for tip and tap actions are provided.

```dart
BrnTitleFormItem(
  title: "自然到访保护期",
  operationLabel: "点击操作",
  onTip: () {
    BrnToast.show("点击触发回调_onTip", context);
  },
  onTap: () {
    BrnToast.show("点击触发回调_onTap", context);
  },
),
```

--------------------------------

### AutoLayout Style Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnTextSelectFormItem/BrnTextSelectFormItem.md

Demonstrates the auto-layout functionality of BrnTextSelectFormItem, suitable for dynamic form layouts.

```APIDOC
## AutoLayout Style

### Code Example

```dart
BrnTextSelectFormItem.autoLayout(
  prefixIconType: BrnPrefixIconType.add,
  isRequire: true,
  error: "必填项不能为空",
  title: "证件类型",
  subTitle: "这里是副标题",
  tipLabel: "标签",
  onTip: () {
    BrnToast.show("点击触发onTip回调", context);
  },
  onAddTap: () {
    BrnToast.show("点击触发onAddTap回调", context);
  },
  onRemoveTap: () {
    BrnToast.show("点击触发onRemoveTap回调", context);
  },
  onTap: () {
    BrnToast.show("点击触发回调_onTap", context);
  },
)
```
```

--------------------------------

### Basic BrnMultiChoicePortraitInputFormItem Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnMultiChoicePortraitInputFormItem/BrnMultiChoicePortraitInputFormItem.md

Demonstrates a basic usage of BrnMultiChoicePortraitInputFormItem with title, options, and callback functions.

```dart
BrnMultiChoicePortraitInputFormItem(
  title: "自然到访保护期",
  options: [
    "固定",
    "永久",
    "未知",
  ],
  value: [
    "固定",
    "永久",
  ],
  onTip: () {
    BrnToast.show("点击触发onTip回调", context);
  },
  onAddTap: () {
    BrnToast.show("点击触发onAddTap回调", context);
  },
  onRemoveTap: () {
    BrnToast.show("点击触发onRemoveTap回调", context);
  },
  onChanged: (List<String> oldValue, List<String> newValue) {
    BrnToast.show(
        "点击触发onChanged回调${oldValue.length}_${newValue.length}_onChanged", context);
  },
),
```

--------------------------------

### Basic BrnSelectAllTitle Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnSelectAllTitle/BrnSelectAllTitle.md

Demonstrates a basic usage of BrnSelectAllTitle with a title, subtitle, and select-all text. Includes callbacks for selection and tip interactions.

```dart
BrnSelectAllTitle(
  title: "基本样式",
  subTitle: "这里是副标题",
  selectText: '全选标题',
  selectState: false,
  onSelectAll: (int index, bool isSelect){
    BrnToast.show("全选回调_onSelectAll", context);
  },
  onTip: () {
    BrnToast.show("点击触发回调_onTip", context);
  },
),
```

--------------------------------

### Custom Data Structure Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/picker/BrnMultiDataPicker/BrnMultiDataPicker.md

Provides an example of a custom nested list structure for populating the multi-column picker.

```dart
List<Map<String, List>> list = [
  {
    '活动1': [
      {
        '活动1-x': ['8', '9']
      }
    ]
  },
  {
    '活动二': [
      {
        '活动二-x': ['5', '6']
      }
    ]
  },
  {
    '活动三': [
      {
        '活动三-x': ['3', '4']
      }
    ]
  },
  {
    '活动四': [
      {
        '活动四-x': ['1', '2']
      },
      {
        '活动四-y': ['11111', '22222']
      }
    ]
  }
];

```

--------------------------------

### Full Functionality Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnTextSelectFormItem/BrnTextSelectFormItem.md

Showcases BrnTextSelectFormItem with all features enabled, including prefix icon, required indicator, error message, subtitle, and tip label.

```APIDOC
## Full Functionality Style

### Code Example

```dart
BrnTextSelectFormItem(
  prefixIconType: BrnPrefixIconType.add,
  isRequire: true,
  error: "必填项不能为空",
  title: "证件类型",
  subTitle: "这里是副标题",
  tipLabel: "标签",
  onTip: () {
    BrnToast.show("点击触发onTip回调", context);
  },
  onAddTap: () {
    BrnToast.show("点击触发onAddTap回调", context);
  },
  onRemoveTap: () {
    BrnToast.show("点击触发onRemoveTap回调", context);
  },
  onTap: () {
    BrnToast.show("点击触发回调_onTap", context);
  },
)
```
```

--------------------------------

### Show Date Picker Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/picker/BrnDatePicker/BrnDatePicker.md

Demonstrates how to display a date picker with specific configurations for min/max dates, initial date, picker mode, minute interval, title configuration, and callback functions for confirm, close, cancel, and change events. The `dateFormat` parameter is crucial for defining the output format.

```dart
BrnDatePicker.showDatePicker(context,
  maxDateTime: DateTime.parse(MAX_DATETIME),
  minDateTime: DateTime.parse(MIN_DATETIME),
  initialDateTime: DateTime.parse('2020-01-01 18:26:59'),
      // 支持DateTimePickerMode.date、DateTimePickerMode.datetime、DateTimePickerMode.time
  pickerMode: DateTimePickerMode.date,
  minuteDivider: 30,
  pickerTitleConfig: BrnPickerTitleConfig.Default,
  dateFormat: format, onConfirm: (dateTime, list) {
    BrnToast.show("onConfirm:  $dateTime   $list", context);
  }, 
	onClose: () {
    print("onClose");
  }, 
	onCancel: () {
    print("onCancel");
  }, 
	onChange: (dateTime, list) {
    print("onChange:  $dateTime    $list");
});
```

--------------------------------

### BrnSelectAllTitle Basic Usage

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnSelectAllTitle/BrnSelectAllTitle.md

Demonstrates the basic usage of BrnSelectAllTitle with a title, subtitle, select text, and an example of handling the select all and tip callbacks.

```APIDOC
## BrnSelectAllTitle Basic Usage

### Description
This example shows a simple implementation of the BrnSelectAllTitle component, including its title, subtitle, and select text. It also demonstrates how to handle user interactions with the select all and tip functionalities.

### Code Example
```dart
BrnSelectAllTitle(
  title: "基本样式",
  subTitle: "这里是副标题",
  selectText: '全选标题',
  selectState: false,
  onSelectAll: (int index, bool isSelect){
    BrnToast.show("全选回调_onSelectAll", context);
  },
  onTip: () {
    BrnToast.show("点击触发回调_onTip", context);
  },
)
```
```

--------------------------------

### Full-featured BrnTitleFormItem Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnTitleFormItem/BrnTitleFormItem.md

Shows a BrnTitleFormItem with all available features, including error messages, subtitle, tip label, and operation label with callbacks.

```dart
BrnTitleFormItem(
  error: "必填项不能为空",
  title: "自然到访保护期",
  subTitle: "这里是副标题",
  tipLabel: "提示",
  operationLabel: "点击操作",
  onTip: () {
    BrnToast.show("点击触发回调_onTip", context);
  },
  onTap: () {
    BrnToast.show("点击触发回调_onTap", context);
  },
),
```

--------------------------------

### Full-featured BrnSelectAllTitle Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnSelectAllTitle/BrnSelectAllTitle.md

Showcases a comprehensive BrnSelectAllTitle configuration with error messages, required field indicator, custom action widget, and detailed callbacks.

```dart
BrnSelectAllTitle(
  error: "必填项不能为空",
  title: "全功能样式",
  subTitle: "这里是副标题",
  selectText: '全选标题文案',
  tipLabel: "提示",
  isRequire: true,
  customActionWidget: Container(
    color:Colors.lightBlue,
    child: Center(
      child: Text('我是自定义视图', style: TextStyle(color: Colors.white))
    ),
  ),
  onSelectAll: (int index, bool isSelect){
    BrnToast.show("全选回调_onSelectAll", context);
  },
  onTip: () {
    BrnToast.show("点击触发回调_onTip", context);
  },
),
```

--------------------------------

### Full-featured BrnMultiChoicePortraitInputFormItem Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnMultiChoicePortraitInputFormItem/BrnMultiChoicePortraitInputFormItem.md

Illustrates a comprehensive BrnMultiChoicePortraitInputFormItem with all features enabled, including prefix icon, required indicator, error message, subtitle, tip label, and disabled options.

```dart
BrnMultiChoicePortraitInputFormItem(
  prefixIconType: BrnPrefixIconType.remove,
  isRequire: true,
  error: "必填项不能为空",
  title: "自然到访保护期",
  subTitle: "这里是副标题",
  tipLabel: "标签",
  options: [
    "固定",
    "永久",
    "未知",
  ],
  value: [
    "固定",
    "永久",
  ],
  enableList: [true, true, false],
  onTip: () {
    BrnToast.show("点击触发onTip回调", context);
  },
  onAddTap: () {
    BrnToast.show("点击触发onAddTap回调", context);
  },
  onRemoveTap: () {
    BrnToast.show("点击触发onRemoveTap回调", context);
  },
  onChanged: (List<String> oldValue, List<String> newValue) {
    BrnToast.show(
        "点击触发onChanged回调${oldValue.length}_${newValue.length}_onChanged", context);
  },
)
```

--------------------------------

### Show Dialog with Warning Icon, Title, Description, and Single Button

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/dialog/BrnEnhanceOperationDialog/BrnEnhanceOperationDialog.md

Demonstrates how to display a dialog with a warning icon, a main title, auxiliary information, and a single primary button. Includes an example of the code to instantiate and show the dialog.

```APIDOC
## Effect 1: Warning Icon + Main Title + Auxiliary Information + Single Button

### Code Example

```dart
BrnEnhanceOperationDialog enhanceOperationDialog = new BrnEnhanceOperationDialog(
   iconType: BrnDialogConstants.ICON_WARNNING,
   context: context,
   titleText: "强提示文案",
   descText: "这里是文案这里是文案这里是文案这里是文案这里是文案这里是文案这里是文案这里是文案",
   mainButtonText: "我知道了",
   mainButtonCallBack: () {
     print("主要按钮");
   },
 );
 enhanceOperationDialog.show();
```
```

--------------------------------

### Normal BrnBigOutlineButton Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/normalButton/BrnBigOutlineButton/BrnBigOutlineButton.md

Demonstrates how to use BrnBigOutlineButton with a title and an onTap callback. This is typically used for primary actions.

```dart
BrnBigOutlineButton(
  title: '次按钮',
  onTap: () {
    BrnToast.show('边框按钮', context);
  },
)
```

--------------------------------

### Full-featured BrnTextSelectFormItem Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnTextSelectFormItem/BrnTextSelectFormItem.md

Showcases a BrnTextSelectFormItem with all available features including prefix icon, required indicator, error message, subtitle, and tip label.

```dart
BrnTextSelectFormItem(
  prefixIconType: BrnPrefixIconType.add,
  isRequire: true,
  error: "必填项不能为空",
  title: "证件类型",
  subTitle: "这里是副标题",
  tipLabel: "标签",
  onTip: () {
    BrnToast.show("点击触发onTip回调", context);
  },
  onAddTap: () {
    BrnToast.show("点击触发onAddTap回调", context);
  },
  onRemoveTap: () {
    BrnToast.show("点击触发onRemoveTap回调", context);
  },
  onTap: () {
    BrnToast.show("点击触发回调_onTap", context);
  },
)
```

--------------------------------

### No Error Message Style Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnTextSelectFormItem/BrnTextSelectFormItem.md

Illustrates BrnTextSelectFormItem without an error message, demonstrating its appearance when validation passes or is not applicable.

```APIDOC
## No Error Message Style

### Code Example

```dart
BrnTextSelectFormItem(
  prefixIconType: BrnPrefixIconType.add,
  isRequire: true,
  title: "证件类型",
  subTitle: "这里是副标题",
  tipLabel: "标签",
  onTip: () {
    BrnToast.show("点击触发onTip回调", context);
  },
  onAddTap: () {
    BrnToast.show("点击触发onAddTap回调", context);
  },
  onRemoveTap: () {
    BrnToast.show("点击触发onRemoveTap回调", context);
  },
  onTap: () {
    BrnToast.show("点击触发回调_onTap", context);
  },
)
```
```

--------------------------------

### BrnFlatSelection with Custom Tag Size

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/selection/BrnFlatSelection/BrnFlatSelection.md

Shows how to customize the number of tags displayed per line using the 'preLineTagSize' parameter. Includes a confirmation callback similar to the basic example.

```dart
BrnFlatSelection(
  preLineTagSize: 4,
  entityDataList: widget._filterData,
  confirmCallback: (data) {
    String str = '';
    data.forEach((k, v) => str=str +" "+'${k}: ${v}');
    BrnToast.show(str, context);
  },
  controller: controller
)
```

--------------------------------

### Disabled BrnBigOutlineButton Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/normalButton/BrnBigOutlineButton/BrnBigOutlineButton.md

Shows how to create a disabled BrnBigOutlineButton by setting `isEnable` to false. Disabled buttons are non-interactive.

```dart
BrnBigOutlineButton(
  title: '提交',
  isEnable: false,
  onTap: () {
    //置灰点击无响应
    BrnToast.show('点击了按钮', context);
  },
)
```

--------------------------------

### BrnEnhanceOperationDialog Constructor and Parameters

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/dialog/BrnEnhanceOperationDialog/BrnEnhanceOperationDialog.md

Explains the constructor for BrnEnhanceOperationDialog and details each parameter, including its type, description, whether it's required, and its default value.

```APIDOC
## BrnEnhanceOperationDialog Constructor

```dart
BrnEnhanceOperationDialog({
    this.iconType = BrnDialogConstants.iconAlert,
    this.customIconWidget,
    required this.context,
    this.titleText,
    this.descText,
    this.mainButtonText,
    this.secondaryButtonText,
    this.onMainButtonClick,
    this.onSecondaryButtonClick,
    this.themeData,
  }) {
    this.themeData ??= BrnDialogConfig();
    this.themeData = BrnThemeConfigurator.instance
        .getConfig(configId: this.themeData!.configId)
        .dialogConfig
        .merge(this.themeData);
  }
```

### Parameters

| Parameter Name | Parameter Type | Description | Required | Default Value |
|---|---|---|---|---|
| context | BuildContext | BuidContext | Yes | null |
| iconType | int | Choose one of the preset prompt icons as the icon (Prompt: BrnDialogConstants.ICON_ALERT, Warning: BrnDialogConstants.ICON_WARNNING, Success: BrnDialogConstants.ICON_SUCCESS, Custom Icon: BrnDialogConstants.ICON_CUSTOM) | No | 0, ICON_ALERT |
| customIconWidget | Widget? | Custom icon | No | null |
| titleText | String? | Dialog title text (if empty, the title will not be displayed) | No | null |
| descText | String? | Dialog auxiliary information text (if empty, the auxiliary information will not be displayed) | No | null |
| mainButtonText? | String | Main button text | No | Default is internationalized configuration text 'Confirm' |
| secondaryButtonText | String? | Secondary button text (if empty, the secondary button will not be displayed) | No | null |
| mainButtonCallBack | VoidCallback? | Callback method after clicking the **main button**. Users should configure response actions based on parameters. | No | null |
| secondaryButtonCallBack | VoidCallback? | Callback method after clicking the **secondary button**. Users should configure response actions based on parameters. | No | null |
| themeData | BrnDialogConfig? | Dialog theme configuration | No | Default takes global configuration |
```

--------------------------------

### Disabled BrnBigMainButton Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/normalButton/BrnBigMainButton/BrnBigMainButton.md

Shows how to create a disabled (grayed out) BrnBigMainButton. The onTap callback is provided but will not be triggered when the button is disabled.

```dart
//置灰效果 无法点击
BrnBigMainButton(  
  title: '提交',  
  isEnable: false,
  onTap: () {  
    BrnToast.show('点击了主按钮', context);
  },  
)
```

--------------------------------

### Show Simple Tips with Close Icon

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/tips/BrnPopupWindow/BrnPopupWindow.md

Demonstrates how to display a simple tip with a close icon using BrnPopupWindow. Ensure the popKey matches the GlobalKey of the target widget.

```dart
RaisedButton(  
  key: _leftKey,  
  onPressed: () {
    // popKey值和目标组件的GlobalKey要保持一致*
    BrnPopupWindow.showPopWindow(  
      context, "订阅搜索条件，新上房源立即通知", _leftKey,  
      hasCloseIcon: true);
  },  
  child: Text("左侧带关闭Tips"),  
)
```

--------------------------------

### BrnTabBar Constructor

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/tabbar/BrnTabBar/BrnTabBar.md

Defines the constructor for BrnTabBar, outlining its parameters and default configurations. It handles theme merging and initial setup.

```dart
BrnTabBar({
  required this.tabs,
  this.mode = BrnTabBarBadgeMode.average,
  this.isScroll = false,
  this.tabHeight,
  this.padding = EdgeInsets.zero,
  this.controller,
  this.backgroundcolor = const Color(0xffffffff),
  this.indicatorColor,
  this.indicatorWeight,
  this.indicatorWidth,
  this.indicatorPadding = EdgeInsets.zero,
  this.labelColor,
  this.labelStyle,
  this.labelPadding = EdgeInsets.zero,
  this.unselectedLabelColor,
  this.unselectedLabelStyle,
  this.dragStartBehavior = DragStartBehavior.start,
  this.onTap,
  this.tabWidth,
  this.hasDivider = false,
  this.hasIndex = false,
  this.showMore = false,
  this.moreWindowText,
  this.onMorePop,
  this.closeController,
  this.themeData,
  this.tagSpacing,
  this.preLineTagCount,
  this.tagHeight,
}) : assert(tabs != null) {
  this.themeData ??= BrnTabBarConfig();
  this.themeData = BrnThemeConfigurator.instance
      .getConfig(configId: this.themeData!.configId)
      .tabBarConfig
      .merge(this.themeData);
  this.themeData = this.themeData!.merge(BrnTabBarConfig(
    tabHeight: tabHeight,
    indicatorHeight: indicatorWeight,
    indicatorWidth: indicatorWidth,
    labelStyle: BrnTextStyle.withStyle(labelStyle),
    unselectedLabelStyle: BrnTextStyle.withStyle(unselectedLabelStyle),
    tagSpacing: tagSpacing,
    preLineTagCount: preLineTagCount,
    tagHeight: tagHeight,
  ));
}
```

--------------------------------

### BrnTextSelectFormItem without Error Message

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnTextSelectFormItem/BrnTextSelectFormItem.md

An example of BrnTextSelectFormItem configured as required, with a subtitle and tip label, but without an error message displayed.

```dart
BrnTextSelectFormItem(
  prefixIconType: BrnPrefixIconType.add,
  isRequire: true,
  title: "证件类型",
  subTitle: "这里是副标题",
  tipLabel: "标签",
  onTip: () {
    BrnToast.show("点击触发onTip回调", context);
  },
  onAddTap: () {
    BrnToast.show("点击触发onAddTap回调", context);
  },
  onRemoveTap: () {
    BrnToast.show("点击触发onRemoveTap回调", context);
  },
  onTap: () {
    BrnToast.show("点击触发回调_onTap", context);
  },
)
```

--------------------------------

### Active BrnBigMainButton Example

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/normalButton/BrnBigMainButton/BrnBigMainButton.md

Demonstrates how to create an active BrnBigMainButton with a title and an onTap callback. The callback shows a toast message upon tapping.

```dart
BrnBigMainButton(
  title: '主按钮',
  onTap: () {
    BrnToast.show('点击', context);
  },
)
```

--------------------------------

### BrnTextSelectFormItem Constructor and Parameters

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/form/BrnTextSelectFormItem/BrnTextSelectFormItem.md

Provides a detailed breakdown of the BrnTextSelectFormItem constructor and its configurable parameters, including their types, descriptions, default values, and whether they are required.

```APIDOC
## BrnTextSelectFormItem

### Description

Used for data selection scenarios. It includes elements like 'title', 'sub-title', 'error message', 'required field indicator', 'add/delete button', 'message prompt', and 'single choice'.

### Constructor

```dart
BrnTextSelectFormItem({
    Key? key,
    this.label,
    this.title: "",
    this.subTitle,
    this.tipLabel,
    this.prefixIconType: BrnPrefixIconType.normal,
    this.error: "",
    this.isEdit: true,
    this.isRequire: false,
    this.onAddTap,
    this.onRemoveTap,
    this.onTip,
    this.hint: "请选择",
    this.value,
    this.valueMaxLines = 1,
    this.titleMaxLines,
    this.onTap,
    this.backgroundColor,
    this.themeData,
  }) : super(key: key) {
    this._isAutoLayout = false;
    this.themeData ??= BrnFormItemConfig();
    this.themeData = BrnThemeConfigurator.instance
        .getConfig(configId: this.themeData!.configId)
        .formItemConfig
        .merge(this.themeData);
    this.themeData = this.themeData!.merge(
        BrnFormItemConfig(backgroundColor: backgroundColor));
  }
```

### Parameters

| Parameter Name | Parameter Type | Description | Required | Default Value | Remarks |
|---|---|---|---|---|---|
| backgroundColor | Color? | Form item background color | No | Theme default color value Colors.white |  |
| label | String? | Unique identifier for the input item, mainly used in the framework of input type pages | No | None |  |
| type | String | Input item type, mainly used in the framework of input type pages | No | BrnInputItemType.textSelectInputType | External can judge the form item type based on this field |
| title | String | Input item title | No | '' |  |
| subTitle | String? | Input item sub-title | No | None |  |
| tipLabel | String? | Input item prompt (question mark icon & text). Trigger onTip callback when user clicks. | No | Type 3 in remarks | 1. Setting to "empty string" displays a question mark icon. 2. Setting to a "non-empty string" displays a question mark icon & text. 3. If not assigned or assigned null, the prompt item is not displayed. |
| prefixIconType | String | Input item prefix icon style "Add item" "Delete item" See **BrnPrefixIconType** class for details | No | BrnPrefixIconType.normal | 1. Do not display icon: BrnPrefixIconType.normal 2. Display plus icon: BrnPrefixIconType.add 3. Display minus icon: BrnPrefixIconType.remove |
| error | String | Input item error prompt | No | '' |  |
| isRequire | bool | Whether the input item is a required field (displays `*` icon), defaults to false (not required) | No | false |  |
| isEdit | bool | Whether the input item is editable | No | true | true: editable, false: disabled |
| onAddTap | VoidCallback? | Callback when the "+" icon is tapped | No | None | See **prefixIconType** field |
| onRemoveTap | VoidCallback? | Callback when the "-" icon is tapped | No | None | See **prefixIconType** field |
| onTip | VoidCallback? | Callback when the "?" icon is tapped | No | None | See **tipLabel** field |
| onTap | VoidCallback? | Callback when the input area is tapped | No | None |  |
| hint | String | Input item hint prompt | No | '请选择' |  |
| value | String? | Input item value | No | None |  |
| valueMaxLines | int | Maximum number of lines for selected text | No | 1 |  |
| titleMaxLines | int? | Maximum number of lines for title | No | None |  |
| layoutRatio | double? | Row layout left:right ratio value. Left side is 'title + question mark + prompt text', right side is 'selected value'. For example, left:right = 6:4, then ratio = 1.5. | No | If left and right content exceeds the default ratio and there is a prompt text, layout according to the ratio 6:4. If left and right content exceeds the default ratio and there is NO prompt text, layout according to the ratio 4:6. If user-defined ratio exists, use user-defined ratio. |  |
| themeData | BrnFormItemConfig? | Form theme configuration | No | None |  |

### Other Data Descriptions:

#### BrnPrefixIconType:

```dart
class BrnPrefixIconType {
  static const String normal = "type_normal";
  static const String add = "type_add";
  static const String remove = "type_remove";
}
```
```

--------------------------------

### BrnGuide Constructor and Parameters

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/guide/BrnGuide/BrnGuide.md

This section details the constructor for the BrnGuide widget and explains its parameters, including guidance mode, widget builder, step count, and styling options.

```APIDOC
## BrnGuide Constructor

### Description
Initializes a BrnGuide instance with specified guidance mode, widget builder, step count, and optional styling parameters.

### Constructor Signature
```dart
BrnGuide({
    @required this.introMode,
    @required this.widgetBuilder,
    @required this.stepCount,
    this.borderRadius = const BorderRadius.all(Radius.circular(4)),
    this.padding = const EdgeInsets.all(10),
    this.onNextClick
})
```

### Parameters
#### Required Parameters
- **introMode** (GuideMode) - Specifies the guidance mode, either 'force' or 'soft'.
- **widgetBuilder** (Widget Function(StepWidgetParams params)) - A function that builds the guidance widget.
- **stepCount** (int) - The total number of steps in the guide. Must be greater than 0.

#### Optional Parameters
- **borderRadius** (BorderRadiusGeometry) - The border radius for highlighted areas in force guidance mode. Defaults to `BorderRadius.all(Radius.circular(4))`.
- **padding** (EdgeInsets) - The spacing between the highlighted component and the target component. Defaults to `EdgeInsets.all(10)`.
- **onNextClick** (void Function(int nextIndex)) - A callback function that is invoked each time the next step is clicked, providing the index of the next step.

## useDefaultTheme Function

### Description
Provides a default theme configuration for the guidance widget builder.

### Function Signature
```dart
static Widget Function(StepWidgetParams params) useDefaultTheme({
  @required List<BrnTipInfoBean> tipInfo,
  String Function(int currentStepIndex, int stepCount) buttonTextBuilder,
  bool showStepLabel = true,
  bool showSkipLabel = true,
  bool showClose = true
})
```

### Parameters
#### Required Parameters
- **tipInfo** (List<BrnTipInfoBean>) - A list of tip information objects to be displayed.

#### Optional Parameters
- **buttonTextBuilder** (String Function(int currentStepIndex, int stepCount)) - A function to customize the text of the next/done button based on the current step and total steps. Defaults to 'Next' and 'Got it'.
- **showStepLabel** (bool) - Whether to display the step count label. Defaults to `true`.
- **showSkipLabel** (bool) - Whether to display the skip button. Defaults to `true`.
- **showClose** (bool) - Whether to display the close button. Defaults to `true`.
```

--------------------------------

### BrnFlatSelection Constructor and Parameters

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/selection/BrnFlatSelection/BrnFlatSelection.md

Details the constructor and parameters available for the BrnFlatSelection widget.

```APIDOC
## BrnFlatSelection Constructor

```dart
BrnFlatSelection(
  {Key? key,
  this.entityDataList,
  this.confirmCallback,
  this.onCustomFloatingLayerClick,
  this.preLineTagSize = 3,
  this.isNeedConfigChild = true,
  this.controller,
  this.themeData})
```

### Parameters

| Parameter Name | Parameter Type | Description | Required | Default Value |
| --- | --- | --- | --- | --- |
| entityDataList | `List<BrnSelectionEntity>` | Filter raw data | Yes | None |
| confirmCallback | `Function(Map<String, String>)?` | Confirm callback | No | None |
| preLineTagSize | int | Number of tags displayed per line | Yes | 3 |
| onCustomFloatingLayerClick | BrnOnCustomFloatingLayerClick? | Custom event handler | No | None |
| isNeedConfigChild | bool | Whether child options need to be configured | Yes | true |
| controller | BrnFlatSelectionController? | Custom controller | No | None |
| themeData | BrnSelectionConfig? | Selection theme configuration | No | None |
```

--------------------------------

### BrnStepLine Constructor and Parameters

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/stepBar/BrnStepLine/BrnStepLine.md

This section details the constructor for the BrnStepLine widget and explains each of its parameters, their types, descriptions, whether they are required, and their default values. This allows developers to customize the appearance and behavior of the vertical step bar.

```APIDOC
## BrnStepLine

### Description

A vertical step bar component that displays steps in a vertical layout. It supports customization for line appearance, content display, and icons.

### Constructor

```dart
const BrnStepLine({
  Key? key,
  required this.contentWidget,
  this.isGrey = false,
  this.lineColor,
  this.lineWidth = 2,
  this.iconTopPadding = 0,
  this.isDashLine = false,
  this.dashLength = 4,
  this.dashSpace = 4,
  this.contentLeftPadding = 12,
  this.normalColor,
  this.highlightColor,
  this.iconWidget,
})
```

### Parameters

#### Widget Parameters

- **contentWidget** (Widget) - Required - The widget to be displayed on the right side of the step.
- **iconWidget** (Widget?) - Optional - A custom widget to be used as the icon for the step.

#### Style and Behavior Parameters

- **isGrey** (bool) - Optional - If true, the entire component (line and icon) will be displayed in gray. Default is `false`.
- **lineColor** (dynamic) - Optional - The color of the border line. Can be a single `Color` or a `List<Color>` for segmented line colors. Default is theme color.
- **lineWidth** (double) - Optional - The width of the line. Default is `2`.
- **iconTopPadding** (double) - Optional - Padding from the top of the item to the icon. Default is `0`.
- **isDashLine** (bool) - Optional - If true, the line will be displayed in a dashed pattern. Default is `false`.
- **dashLength** (double) - Optional - The length of each dash in the dashed line. Default is `4`.
- **dashSpace** (double) - Optional - The space between each dash in the dashed line. Default is `4`.
- **contentLeftPadding** (double) - Optional - Padding to the left of the `contentWidget`. Default is `12`.
- **normalColor** (Color?) - Optional - The color for the normal state (when `isGrey` is true). Default is `Color(0xffeeeeee)`.
- **highlightColor** (Color?) - Optional - The color for the highlight state (when `isGrey` is false). Default is theme color.
```

--------------------------------

### BrnProgressChart with Custom Indicator

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/charts/BrnProgressChart/BrnProgressChart.md

Example of using BrnProgressChart with a custom indicator builder to display text. The 'width' and 'height' are set to 200 and 20 respectively, and the 'value' is 0.6.

```dart
BrnProgressChart(  
  key: UniqueKey(),  
  width: 200,  
  height: 20,  
  value: 0.6,  
  brnProgressIndicatorBuilder: (BuildContext context, double value) {  
    	return Text('自定义文本：$value', style: TextStyle(color: Colors.white),  
    );
  },
)
```

--------------------------------

### Basic BrnRichInfoGrid Usage

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/text/BrnRichInfoGrid/BrnRichInfoGrid.md

Demonstrates the basic usage of BrnRichInfoGrid to display a list of key-value information pairs. This is suitable for simple detail views.

```dart
BrnRichInfoGrid(
  pairInfoList: [
    BrnRichGridInfo('名称:', '25-30平'),
    BrnRichGridInfo('户型:', '1-0-0-1'),
    BrnRichGridInfo('朝向:', '南北/西/北'),
    BrnRichGridInfo('窗户:', '无窗'),
    BrnRichGridInfo('供暖:', '集体供暖'),
    BrnRichGridInfo('装修:', '精装修'),
    BrnRichGridInfo('车位:', '可租 300元/月'),
  ],
)
```

--------------------------------

### BrnFunnelChart Constructor and Parameters

Source: https://github.com/lianjiatech/bruno/blob/3.x/doc/components/charts/BrnFunnelChart/BrnFunnelChart.md

This section details the constructor for the BrnFunnelChart widget and explains each of its parameters, including their types, descriptions, whether they are required, and default values.

```APIDOC
## BrnFunnelChart Constructor

### Description

Constructs a BrnFunnelChart widget.

### Constructor Signature

```dart
BrnFunnelChart({
    Key? key,
    required this.layerCount,
    required this.markerCount,
    required this.layerPainter,
    required MarkerBuilder builder,
    this.shape = FunnelShape.leftAndRight,
    this.maxLayerWidth = 200,
    this.minLayerWidth = 0,
    this.layerHeight = 40,
    this.layerMargin = 0,
    this.childOffset = Offset.zero,
    this.alignment = MarkerAlignment.right,
  })
```

### Parameters

| Parameter Name | Parameter Type | Description | Required | Default Value | Notes |
|---|---|---|---|---|---|
| `layerCount` | `int` | The number of layers in the funnel chart. | Yes |  | |
| `markerCount` | `int` | The number of markers (labels) in the funnel chart. | Yes |  | The number of markers must be equal to or one less than the number of layers. |
| `layerPainter` | `BrnFunnelLayerPainter` | Used to control the drawing of text for each layer. | Yes |  | See detailed `BrnFunnelLayerPainter` introduction. |
| `builder` | `Function` | Used to provide the label Widget for each layer. | Yes |  | |
| `shape` | `FunnelShape` | Used to control the shape of the funnel. | No | `FunnelShape.LeftAndRight` | `FunnelShape.LeftAndRight` represents an inverted triangle funnel shape. `FunnelShape.LeftorRight` represents a trapezoidal funnel shape. |
| `maxLayerWidth` | `double` | The maximum width of each layer in the funnel. | No | `200` | |
| `minLayerWidth` | `double` | The minimum width of each layer in the funnel. | No | `0` | |
| `layerHeight` | `double` | The height of each layer in the funnel. | No | `40` | |
| `layerMargin` | `double` | The margin between each layer in the funnel. | No | `0` | |
| `childOffset` | `Offset` | The offset of the markers. | No | `Offset.zero` | Relative offset from the initial placement position of the markers. |
| `alignment` | `MarkerAlignment` | The alignment method for the markers. | No | `MarkerAlignment.right` | There are three alignment options: left, center, and right. When the funnel shape is `FunnelShape.leftOrRight`, it cannot be set to center. |

## BrnFunnelLayerPainter Abstract Class

### Description

Used to control the drawing of text for each layer.

### Abstract Methods

| Method Signature |
|---| 
| `bool isGradient(int layerIndex)` |
| `List<Color> getLayerColors(int layerIndex)` |
| `void paintLayer(Canvas canvas, double left, double top, double right, double bottom, int layerIndex)` |

### `paintLayer` Method Details

- `canvas`: The canvas provided for drawing. Remember to call `canvas.save()` before performing operations like rotation or clipping.
- `left`, `top`, `right`, `bottom`: A safe drawing area provided to the caller. Exceeding these limits may result in clipping.
- `layerIndex`: The index of the funnel layer.
```