预览旋钮

定义用于更新一组属性的自定义面板。

screenshot

快速入门

设置面板打开的编辑区域，该区域将包含Knobs作为子元素。

MaterialApp(
    builder: (context, child) => KnobsEditor(child: child!),
    // ...
)

将可定制区域定义为Knobs小部件实例。

Knobs(
    name: 'Title',
    properties: [
        Property<String>('text', widget.title),
        const Property<double>('fontSize', 12),
        const Property<String>('fontFamily', 'Roboto'),
        Property<FontWeight>.enumOptions('fontWeight', FontWeight.values),
    ],
    documentation: (context, data) => '''This is a doc example.''',
    builder: (context, _) => GestureDetector(
        onTap: () => Knobs.showEditor(context),
        child: Text(
                // `context.preview_knobs.read<String>('text')` can also be used for children widgets
                data.read<String>('text'), 
                style: TextStyle(
                fontSize: data.read<double>('fontSize'),
                fontFamily: data.read<String>('fontFamily'),
                fontWeight: data.read<FontWeight>('fontWeight'),
            ),
        ),
    ),
),

用法

支持的属性类型。

  • 字符串
  • 双精度
  • 布尔值
  • 具有预定义值集的选项，任何类型（*带有枚举的辅助程序*）。

GitHub

查看 Github