Refactor: delete StackItem
Callers skip a hidden child with if !hidden { build() }; an unbuilt
child already takes no room and no gap. Docs, Example and Gallery
updated.
This commit is contained in:
5 files changed
+17
-25
No files matched your search
@@ -2,14 +2,16 @@
|
|||||||
|
|
||||||
## 用途
|
## 用途
|
||||||
|
|
||||||
按横向或纵向排列子元素,统一间距、对齐与换行。用 `StackItem` 包裹可隐藏的子项,隐藏时不占位置也不留间距。
|
按横向或纵向排列子元素,统一间距、对齐与换行。要隐藏子项就不构建它(`if !hidden { build() }`),未构建的子项不占位置也不留间距。
|
||||||
|
|
||||||
## 最小示例
|
## 最小示例
|
||||||
|
|
||||||
```go
|
```go
|
||||||
mujica.Stack(c, mujica.StackOptions{Horizontal: true, Gap: mujica.SpaceM}, func() {
|
mujica.Stack(c, mujica.StackOptions{Horizontal: true, Gap: mujica.SpaceM}, func() {
|
||||||
mujica.Button(c, "Save", mujica.ButtonOptions{})
|
mujica.Button(c, "Save", mujica.ButtonOptions{})
|
||||||
mujica.StackItem(!showDraft, func() { mujica.Button(c, "Draft", mujica.ButtonOptions{Variant: mujica.Secondary}) })
|
if showDraft {
|
||||||
|
mujica.Button(c, "Draft", mujica.ButtonOptions{Variant: mujica.Secondary})
|
||||||
|
}
|
||||||
mujica.Button(c, "Cancel", mujica.ButtonOptions{Variant: mujica.Ghost})
|
mujica.Button(c, "Cancel", mujica.ButtonOptions{Variant: mujica.Ghost})
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@@ -17,7 +19,6 @@ mujica.Stack(c, mujica.StackOptions{Horizontal: true, Gap: mujica.SpaceM}, func(
|
|||||||
签名:
|
签名:
|
||||||
|
|
||||||
- `func Stack(c *ui.Context, opts StackOptions, children func()) *ui.Element`
|
- `func Stack(c *ui.Context, opts StackOptions, children func()) *ui.Element`
|
||||||
- `func StackItem(hidden bool, build func())`
|
|
||||||
|
|
||||||
## 参数
|
## 参数
|
||||||
|
|
||||||
@@ -29,8 +30,6 @@ mujica.Stack(c, mujica.StackOptions{Horizontal: true, Gap: mujica.SpaceM}, func(
|
|||||||
| `Justify` | `ui.Align` | `ui.Start` | 主轴分布:Start、Center、End、SpaceBetween、SpaceAround、SpaceEvenly。 |
|
| `Justify` | `ui.Align` | `ui.Start` | 主轴分布:Start、Center、End、SpaceBetween、SpaceAround、SpaceEvenly。 |
|
||||||
| `Wrap` | `bool` | false | 横向换行;纵向时设置会 panic。 |
|
| `Wrap` | `bool` | false | 横向换行;纵向时设置会 panic。 |
|
||||||
|
|
||||||
`StackItem`:`hidden` 为 true 时不构建 `build`,因此既不占空间也不产生间距。`build` 为 nil 时 panic。
|
|
||||||
|
|
||||||
## 状态
|
## 状态
|
||||||
|
|
||||||
布局组件,无交互状态。
|
布局组件,无交互状态。
|
||||||
|
|||||||
@@ -61,7 +61,9 @@ func ExampleStack() {
|
|||||||
mujica.Use(c, mujica.Settings{})
|
mujica.Use(c, mujica.Settings{})
|
||||||
mujica.Stack(c, mujica.StackOptions{Horizontal: true, Gap: mujica.SpaceM}, func() {
|
mujica.Stack(c, mujica.StackOptions{Horizontal: true, Gap: mujica.SpaceM}, func() {
|
||||||
mujica.Button(c, "Save", mujica.ButtonOptions{})
|
mujica.Button(c, "Save", mujica.ButtonOptions{})
|
||||||
mujica.StackItem(!showDraft, func() { mujica.Button(c, "Draft", mujica.ButtonOptions{Variant: mujica.Secondary}) })
|
if showDraft {
|
||||||
|
mujica.Button(c, "Draft", mujica.ButtonOptions{Variant: mujica.Secondary})
|
||||||
|
}
|
||||||
mujica.Button(c, "Cancel", mujica.ButtonOptions{Variant: mujica.Ghost})
|
mujica.Button(c, "Cancel", mujica.ButtonOptions{Variant: mujica.Ghost})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -245,7 +245,9 @@ func layoutContainerDemo(c *ui.Context, log func(string)) {
|
|||||||
|
|
||||||
const layoutStackCode = `mujica.Stack(c, mujica.StackOptions{Horizontal: true, Gap: mujica.SpaceM}, func() {
|
const layoutStackCode = `mujica.Stack(c, mujica.StackOptions{Horizontal: true, Gap: mujica.SpaceM}, func() {
|
||||||
mujica.Button(c, "Save", mujica.ButtonOptions{})
|
mujica.Button(c, "Save", mujica.ButtonOptions{})
|
||||||
mujica.StackItem(!showDraft, func() { mujica.Button(c, "Draft", mujica.ButtonOptions{Variant: mujica.Secondary}) })
|
if showDraft {
|
||||||
|
mujica.Button(c, "Draft", mujica.ButtonOptions{Variant: mujica.Secondary})
|
||||||
|
}
|
||||||
mujica.Button(c, "Cancel", mujica.ButtonOptions{Variant: mujica.Ghost})
|
mujica.Button(c, "Cancel", mujica.ButtonOptions{Variant: mujica.Ghost})
|
||||||
})`
|
})`
|
||||||
|
|
||||||
@@ -276,11 +278,9 @@ func layoutStackDemo(c *ui.Context, log func(string)) {
|
|||||||
mujica.Stack(c, mujica.StackOptions{Horizontal: s.horizontal, Wrap: s.wrap, Gap: layoutSpace(s.gap),
|
mujica.Stack(c, mujica.StackOptions{Horizontal: s.horizontal, Wrap: s.wrap, Gap: layoutSpace(s.gap),
|
||||||
Align: align, Justify: justifies[s.justify]}, func() {
|
Align: align, Justify: justifies[s.justify]}, func() {
|
||||||
for _, n := range []string{"Save", "Draft", "Publish", "Archive", "Cancel"} {
|
for _, n := range []string{"Save", "Draft", "Publish", "Archive", "Cancel"} {
|
||||||
mujica.StackItem(s.hide && n == "Draft", func() {
|
if (!s.hide || n != "Draft") && mujica.Button(c, n, mujica.ButtonOptions{Variant: mujica.Secondary}).Clicked() {
|
||||||
if mujica.Button(c, n, mujica.ButtonOptions{Variant: mujica.Secondary}).Clicked() {
|
log(n + " clicked")
|
||||||
log(n + " clicked")
|
}
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}).Grow(1).Padding(12)
|
}).Grow(1).Padding(12)
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ type StackOptions struct {
|
|||||||
Wrap bool
|
Wrap bool
|
||||||
}
|
}
|
||||||
|
|
||||||
// Stack arranges children in a row or column. Build children with StackItem to hide them without leaving a gap.
|
// Stack arranges children in a row or column. A child not built takes no room and no gap.
|
||||||
func Stack(c *ui.Context, opts StackOptions, children func()) *ui.Element {
|
func Stack(c *ui.Context, opts StackOptions, children func()) *ui.Element {
|
||||||
if children == nil {
|
if children == nil {
|
||||||
panic("mujica: Stack needs children")
|
panic("mujica: Stack needs children")
|
||||||
@@ -57,13 +57,3 @@ func Stack(c *ui.Context, opts StackOptions, children func()) *ui.Element {
|
|||||||
}
|
}
|
||||||
return e.Children(children)
|
return e.Children(children)
|
||||||
}
|
}
|
||||||
|
|
||||||
// StackItem builds one child of a Stack unless hidden; a hidden item takes no room and no gap.
|
|
||||||
func StackItem(hidden bool, build func()) {
|
|
||||||
if build == nil {
|
|
||||||
panic("mujica: StackItem needs build")
|
|
||||||
}
|
|
||||||
if !hidden {
|
|
||||||
build()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+3
-2
@@ -30,7 +30,9 @@ func TestStackHiddenItemTakesNoGap(t *testing.T) {
|
|||||||
Use(c, Settings{})
|
Use(c, Settings{})
|
||||||
Stack(c, StackOptions{Horizontal: true, Gap: SpaceL}, func() {
|
Stack(c, StackOptions{Horizontal: true, Gap: SpaceL}, func() {
|
||||||
a = ui.Box(c).Size(30, 10).Bounds()
|
a = ui.Box(c).Size(30, 10).Bounds()
|
||||||
StackItem(hide, func() { ui.Box(c).Size(30, 10) })
|
if !hide {
|
||||||
|
ui.Box(c).Size(30, 10)
|
||||||
|
}
|
||||||
last = ui.Box(c).Size(30, 10).Bounds()
|
last = ui.Box(c).Size(30, 10).Bounds()
|
||||||
})
|
})
|
||||||
}, 300, 300).Frame()
|
}, 300, 300).Frame()
|
||||||
@@ -105,7 +107,6 @@ func TestStackSnapshot(t *testing.T) {
|
|||||||
})
|
})
|
||||||
Stack(c, StackOptions{Horizontal: true, Justify: ui.SpaceBetween}, func() {
|
Stack(c, StackOptions{Horizontal: true, Justify: ui.SpaceBetween}, func() {
|
||||||
chip("Start")
|
chip("Start")
|
||||||
StackItem(true, func() { chip("Hidden") })
|
|
||||||
chip("Between")
|
chip("Between")
|
||||||
chip("End")
|
chip("End")
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in new issue
Block a user