shadcn_ui-resizable

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shadcn UI — Resizable

Shadcn UI — 可调整大小面板

Instructions

使用说明

ShadResizablePanelGroup

contains

ShadResizablePanel

children. Each panel has

id

defaultSize

(fraction 0–1), optional

minSize

and

maxSize

, and

child

. Use

axis: Axis.vertical

for vertical splits. Nest

ShadResizablePanelGroup

inside a panel for nested layouts. Set

showHandle: true

to show the resize handle; optional

handleIcon

handleIconSrc

to customize. Double-click the handle to reset to default size.

ShadResizablePanelGroup

包含

ShadResizablePanel

子组件。每个面板拥有

id

、

defaultSize

（取值范围0–1的比例值）、可选的

minSize

和

maxSize

，以及

child

属性。使用

axis: Axis.vertical

实现垂直拆分。在面板中嵌套

ShadResizablePanelGroup

可创建嵌套布局。设置

showHandle: true

可显示调整手柄；还可通过

handleIcon

或

handleIconSrc

自定义手柄样式。双击手柄可重置为默认大小。

Basic horizontal

基础水平布局

dart

ShadResizablePanelGroup(
  children: [
    ShadResizablePanel(
      id: 0,
      defaultSize: .5,
      minSize: .2,
      maxSize: .8,
      child: Center(child: Text('One', style: theme.textTheme.large)),
    ),
    ShadResizablePanel(
      id: 1,
      defaultSize: .5,
      child: ShadResizablePanelGroup(
        axis: Axis.vertical,
        children: [
          ShadResizablePanel(
            id: 0,
            defaultSize: .3,
            child: Center(child: Text('Two', style: theme.textTheme.large)),
          ),
          ShadResizablePanel(
            id: 1,
            defaultSize: .7,
            child: Align(child: Text('Three', style: theme.textTheme.large)),
          ),
        ],
      ),
    ),
  ],
)

dart

ShadResizablePanelGroup(
  children: [
    ShadResizablePanel(
      id: 0,
      defaultSize: .5,
      minSize: .2,
      maxSize: .8,
      child: Center(child: Text('One', style: theme.textTheme.large)),
    ),
    ShadResizablePanel(
      id: 1,
      defaultSize: .5,
      child: ShadResizablePanelGroup(
        axis: Axis.vertical,
        children: [
          ShadResizablePanel(
            id: 0,
            defaultSize: .3,
            child: Center(child: Text('Two', style: theme.textTheme.large)),
          ),
          ShadResizablePanel(
            id: 1,
            defaultSize: .7,
            child: Align(child: Text('Three', style: theme.textTheme.large)),
          ),
        ],
      ),
    ),
  ],
)

Vertical

垂直布局

dart

ShadResizablePanelGroup(
  axis: Axis.vertical,
  children: [
    ShadResizablePanel(
      id: 0,
      defaultSize: 0.3,
      minSize: 0.1,
      child: Center(child: Text('Header', style: theme.textTheme.large)),
    ),
    ShadResizablePanel(
      id: 1,
      defaultSize: 0.7,
      minSize: 0.1,
      child: Center(child: Text('Footer', style: theme.textTheme.large)),
    ),
  ],
)

dart

ShadResizablePanelGroup(
  axis: Axis.vertical,
  children: [
    ShadResizablePanel(
      id: 0,
      defaultSize: 0.3,
      minSize: 0.1,
      child: Center(child: Text('Header', style: theme.textTheme.large)),
    ),
    ShadResizablePanel(
      id: 1,
      defaultSize: 0.7,
      minSize: 0.1,
      child: Center(child: Text('Footer', style: theme.textTheme.large)),
    ),
  ],
)

With visible handle

显示调整手柄

dart

ShadResizablePanelGroup(
  showHandle: true,
  children: [
    ShadResizablePanel(id: 0, defaultSize: .5, minSize: .2, child: ...),
    ShadResizablePanel(id: 1, defaultSize: .5, minSize: .2, child: ...),
  ],
)

Wrap the group in a bordered container (e.g.

DecoratedBox

ClipRRect

with

theme.radius

) for a clean look.

dart

ShadResizablePanelGroup(
  showHandle: true,
  children: [
    ShadResizablePanel(id: 0, defaultSize: .5, minSize: .2, child: ...),
    ShadResizablePanel(id: 1, defaultSize: .5, minSize: .2, child: ...),
  ],
)

将面板组包裹在带边框的容器中（例如

DecoratedBox

ClipRRect

并设置

theme.radius

），可获得简洁美观的外观。