按钮:ElevatedButton

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在这个 UserCreate 小部件里面,先用一个 Column 小部件添加一组竖排显示的小部件。它的 children 属性的值就是一组小部件。可以先添加一个大标题,使用一个  Text 小部件,标题文字是 注册用户,设置一下文字的 style ,也就是文字的样式,它的值是一个 TextStyle,里面用 fontWeight 把文字粗细设置成 FontWeight.w300 ,再用 fontSize 把字号设置成 32。

想让 Column 里面的子部件垂直居中,可以设置一下它的主轴的对齐,这里把 mainAxisAlignment 设置成 MainAxisAlignment.center,主轴居中对齐。然后再用 crossAxisAlignment 设置一下交叉轴对齐,设置成 CrossAxisAlignment.start,在交叉轴的开始位置对齐这些子部件。

你会发现这个 Column 小部件的宽度应该就是它的子部件的宽度加上它的内边距的大小。想让这个小部件占用整个页面的宽度可以再设置一下,打开 playground_input 这个小部件,找到这个 Container 小部件,在它里面用 width 属性设置一下小部件的宽度,大小是 double.infinity。

现在 Column 的宽度就会是整个屏幕的宽度了。因为设置了 Container 小部件的宽度以后,这个小部件给它的子部件,也就是 Column 这个小部件的约束就变成了一个严格约束,要求这个小部件的宽度必须是整个屏幕的宽度。

在这个标题文字跟下面的小部件之间可以留点间隔,这里我们可以使用一个 SizedBox 小部件,设置一下小部件的 height,高度的大小就是间隔的大小,这里设置成 32 。

注册用户页面需要有一个注册用户按钮,点按这个按钮可以向服务端接口发送请求,把用户填写的要注册的用户相关的数据发送给服务端应用对应的接口。

这个按钮可以使用一个 ElevatedButton  小部件,小部件的 child 可以使用一个 Text,按钮文字是 注册用户。按钮需要一个点按事件处理方法,添加一个 onPressed ,点按这个按钮会执行这个方法,在这个方法里可以在控制台上输出 注册用户 这几个字。

下面可以再设置一下这个按钮的样式,在小部件里面用一个 style 属性设置一下它的样式,它的值用一下 ElevatedButton.styleFrom 这个静态方法配置一下这个按钮的样式。

用 textStyle 设置一下按钮文字的样式,它的值是一个 TextStyle,在里面可以把 fontSize 设置成 20。然后可以再用一个 minimumSize ,设置一下按钮的最小尺寸,值是一个 Size,宽度设置成 double.infinity,最小高度设置成 60 。

在界面上再观察一下这个按钮的样式。可以再打开 Debug Console,调试控制台,打开以后,点按界面上的这个注册用户按钮,在控制台上会输出 注册用户这几个字。

按钮:ElevatedButton《 Flutter 2:表单元素 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点