文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Go Gio 实战:煮蛋计时器的实现之带边距的按钮

2024-12-02 14:17

关注

Button with margin

02 关键代码

在这些边距内创建按钮

代码如下:

  1. layout.Flex{ 
  2.     // ... 
  3. }.Layout(gtx,  
  4.     layout.Rigid( 
  5.         func(gtx C) D { 
  6.             // 1、使用 layout.Inset 定义边距 
  7.             margin := layout.Inset{ 
  8.                 // ... 
  9.             } 
  10.  
  11.             // 2、布局这些边距 
  12.             margins.Layout( 
  13.                  
  14.                 // 3、在这些边距内创建按钮 
  15.                 func(gtx C) D { 
  16.                     btn := material.Button(th, &startButton, "Start"
  17.                     return btn.Layout(gtx) 
  18.                 }, 
  19.              
  20.             ) 
  21.  
  22.             } 
  23.         } 
  24.     )     

03 代码详解

上面就像一个中间有一个按钮的甜甜圈。这个比喻形象吗?

Button inside inset

边距是使用 layout.Inset{} 构建的。它是一个结构体,定义了小部件周围的空间:

  1. margins := layout.Inset{ 
  2.     Top:    unit.Dp(25), 
  3.     Bottom: unit.Dp(25), 
  4.     Right:  unit.Dp(35), 
  5.     Left:   unit.Dp(35), 

在这里,margins 使用设备独立的单位:unit.Dp。如果你希望所有边的边距都相同,还有一个方便的 UniformInset( ),可以为你节省几次按键操作。

04 完整代码

以下是 system.FrameEvent 部分的完整代码:

  1. case system.FrameEvent: 
  2.     gtx := layout.NewContext(&ops, e) 
  3.     // Let's try out the flexbox layout concept 
  4.     layout.Flex{ 
  5.         // Vertical alignment, from top to bottom 
  6.         Axis: layout.Vertical, 
  7.         // Empty space is left at the start, i.e. at the top 
  8.         Spacing: layout.SpaceStart, 
  9.     }.Layout(gtx, 
  10.         layout.Rigid( 
  11.             func(gtx C) D { 
  12.                 // 1、使用 layout.Inset 定义边距 
  13.                 margins := layout.Inset{ 
  14.                     Top:    unit.Dp(25), 
  15.                     Bottom: unit.Dp(25), 
  16.                     Right:  unit.Dp(35), 
  17.                     Left:   unit.Dp(35), 
  18.                 } 
  19.                 // 2、布局这些边距 
  20.                 return margins.Layout(gtx, 
  21.                     // 3、在这些边距内创建按钮 
  22.                     func(gtx C) D { 
  23.                         btn := material.Button(th, &startButton, "Start"
  24.                         return btn.Layout(gtx) 
  25.                     }, 
  26.                 ) 
  27.             }, 
  28.         ), 
  29.     ) 
  30.     e.Frame(gtx.Ops) 

 

来源: 幽鬼内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯