forked from go/golangs_learn
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
182 lines
4.8 KiB
182 lines
4.8 KiB
3 years ago
|
package appbar
|
||
|
|
||
|
import (
|
||
|
"image/color"
|
||
|
|
||
|
"gioui.org/layout"
|
||
|
"gioui.org/widget"
|
||
|
"gioui.org/widget/material"
|
||
|
"gioui.org/x/component"
|
||
|
|
||
|
alo "gioui.org/example/component/applayout"
|
||
|
"gioui.org/example/component/icon"
|
||
|
page "gioui.org/example/component/pages"
|
||
|
)
|
||
|
|
||
|
type (
|
||
|
C = layout.Context
|
||
|
D = layout.Dimensions
|
||
|
)
|
||
|
|
||
|
// Page holds the state for a page demonstrating the features of
|
||
|
// the AppBar component.
|
||
|
type Page struct {
|
||
|
heartBtn, plusBtn, contextBtn widget.Clickable
|
||
|
exampleOverflowState, red, green, blue widget.Clickable
|
||
|
bottomBar, customNavIcon widget.Bool
|
||
|
favorited bool
|
||
|
widget.List
|
||
|
*page.Router
|
||
|
}
|
||
|
|
||
|
// New constructs a Page with the provided router.
|
||
|
func New(router *page.Router) *Page {
|
||
|
return &Page{
|
||
|
Router: router,
|
||
|
}
|
||
|
}
|
||
|
|
||
|
var _ page.Page = &Page{}
|
||
|
|
||
|
func (p *Page) Actions() []component.AppBarAction {
|
||
|
return []component.AppBarAction{
|
||
|
{
|
||
|
OverflowAction: component.OverflowAction{
|
||
|
Name: "Favorite",
|
||
|
Tag: &p.heartBtn,
|
||
|
},
|
||
|
Layout: func(gtx layout.Context, bg, fg color.NRGBA) layout.Dimensions {
|
||
|
if p.heartBtn.Clicked() {
|
||
|
p.favorited = !p.favorited
|
||
|
}
|
||
|
btn := component.SimpleIconButton(bg, fg, &p.heartBtn, icon.HeartIcon)
|
||
|
btn.Background = bg
|
||
|
if p.favorited {
|
||
|
btn.Color = color.NRGBA{R: 200, A: 255}
|
||
|
} else {
|
||
|
btn.Color = fg
|
||
|
}
|
||
|
return btn.Layout(gtx)
|
||
|
},
|
||
|
},
|
||
|
component.SimpleIconAction(&p.plusBtn, icon.PlusIcon,
|
||
|
component.OverflowAction{
|
||
|
Name: "Create",
|
||
|
Tag: &p.plusBtn,
|
||
|
},
|
||
|
),
|
||
|
}
|
||
|
}
|
||
|
|
||
|
func (p *Page) Overflow() []component.OverflowAction {
|
||
|
return []component.OverflowAction{
|
||
|
{
|
||
|
Name: "Example 1",
|
||
|
Tag: &p.exampleOverflowState,
|
||
|
},
|
||
|
{
|
||
|
Name: "Example 2",
|
||
|
Tag: &p.exampleOverflowState,
|
||
|
},
|
||
|
}
|
||
|
}
|
||
|
|
||
|
func (p *Page) NavItem() component.NavItem {
|
||
|
return component.NavItem{
|
||
|
Name: "App Bar Features",
|
||
|
Icon: icon.HomeIcon,
|
||
|
}
|
||
|
}
|
||
|
|
||
|
const (
|
||
|
settingNameColumnWidth = .3
|
||
|
settingDetailsColumnWidth = 1 - settingNameColumnWidth
|
||
|
)
|
||
|
|
||
|
func (p *Page) Layout(gtx C, th *material.Theme) D {
|
||
|
p.List.Axis = layout.Vertical
|
||
|
return material.List(th, &p.List).Layout(gtx, 1, func(gtx C, _ int) D {
|
||
|
return layout.Flex{
|
||
|
Alignment: layout.Middle,
|
||
|
Axis: layout.Vertical,
|
||
|
}.Layout(gtx,
|
||
|
layout.Rigid(func(gtx C) D {
|
||
|
return alo.DefaultInset.Layout(gtx, material.Body1(th, `The app bar widget provides a consistent interface element for triggering navigation and page-specific actions.
|
||
|
|
||
|
The controls below allow you to see the various features available in our App Bar implementation.`).Layout)
|
||
|
}),
|
||
|
layout.Rigid(func(gtx C) D {
|
||
|
return alo.DetailRow{}.Layout(gtx, material.Body1(th, "Contextual App Bar").Layout, func(gtx C) D {
|
||
|
if p.contextBtn.Clicked() {
|
||
|
p.Router.AppBar.SetContextualActions(
|
||
|
[]component.AppBarAction{
|
||
|
component.SimpleIconAction(&p.red, icon.HeartIcon,
|
||
|
component.OverflowAction{
|
||
|
Name: "House",
|
||
|
Tag: &p.red,
|
||
|
},
|
||
|
),
|
||
|
},
|
||
|
[]component.OverflowAction{
|
||
|
{
|
||
|
Name: "foo",
|
||
|
Tag: &p.blue,
|
||
|
},
|
||
|
{
|
||
|
Name: "bar",
|
||
|
Tag: &p.green,
|
||
|
},
|
||
|
},
|
||
|
)
|
||
|
p.Router.AppBar.ToggleContextual(gtx.Now, "Contextual Title")
|
||
|
}
|
||
|
return material.Button(th, &p.contextBtn, "Trigger").Layout(gtx)
|
||
|
})
|
||
|
}),
|
||
|
layout.Rigid(func(gtx C) D {
|
||
|
return alo.DetailRow{}.Layout(gtx,
|
||
|
material.Body1(th, "Bottom App Bar").Layout,
|
||
|
func(gtx C) D {
|
||
|
if p.bottomBar.Changed() {
|
||
|
if p.bottomBar.Value {
|
||
|
p.Router.ModalNavDrawer.Anchor = component.Bottom
|
||
|
p.Router.AppBar.Anchor = component.Bottom
|
||
|
} else {
|
||
|
p.Router.ModalNavDrawer.Anchor = component.Top
|
||
|
p.Router.AppBar.Anchor = component.Top
|
||
|
}
|
||
|
p.Router.BottomBar = p.bottomBar.Value
|
||
|
}
|
||
|
|
||
|
return material.Switch(th, &p.bottomBar, "Use Bottom App Bar").Layout(gtx)
|
||
|
})
|
||
|
}),
|
||
|
layout.Rigid(func(gtx C) D {
|
||
|
return alo.DetailRow{}.Layout(gtx,
|
||
|
material.Body1(th, "Custom Navigation Icon").Layout,
|
||
|
func(gtx C) D {
|
||
|
if p.customNavIcon.Changed() {
|
||
|
if p.customNavIcon.Value {
|
||
|
p.Router.AppBar.NavigationIcon = icon.HomeIcon
|
||
|
} else {
|
||
|
p.Router.AppBar.NavigationIcon = icon.MenuIcon
|
||
|
}
|
||
|
}
|
||
|
return material.Switch(th, &p.customNavIcon, "Use Custom Navigation Icon").Layout(gtx)
|
||
|
})
|
||
|
}),
|
||
|
layout.Rigid(func(gtx C) D {
|
||
|
return alo.DetailRow{}.Layout(gtx,
|
||
|
material.Body1(th, "Animated Resize").Layout,
|
||
|
material.Body2(th, "Resize the width of your screen to see app bar actions collapse into or emerge from the overflow menu (as size permits).").Layout,
|
||
|
)
|
||
|
}),
|
||
|
layout.Rigid(func(gtx C) D {
|
||
|
return alo.DetailRow{}.Layout(gtx,
|
||
|
material.Body1(th, "Custom Action Buttons").Layout,
|
||
|
material.Body2(th, "Click the heart action to see custom button behavior.").Layout)
|
||
|
}),
|
||
|
)
|
||
|
})
|
||
|
}
|