用户登录

如果你需要一块界面,有个背景颜色或者图像 .. 设置一个固定的尺寸,需要点边距,加上点圆角或者边框之类的效果 .. 可以用一下 Container 这个 Wdiget ..

添加一个 Container .. 里面先添加一个 color 属性,设置一下这个容器的背景颜色 .. 用一种浅灰色 .. Colors.grey[100]

默认这个容器会尽可能的大 .. 所以它会占满整个可用的区域 .. 如果你想设置容器的尺寸,需要把它放在一个 Row 或者 Column 里面 ..

Container 小部件只能有一个孩子 .. 添加一个 child 属性 .. 它的孩子用一个 Row 小部件 .. 在这个小部件里面可以添加一组横排显示的东西 ..

它可以有一群孩子 .. 添加一个 children ... 它的值是一组 Widget .. 里面再用一个 Container .. 添加一个 child 属性设置一下它包装的东西 .. 这里可以使用一个小图标 .. 要显示的图标是 Icons.pool .. size 是 32.0 ... color 是白色 ..

然后再用一个 color 设置一下 Container 的背景颜色 .. 这个颜色用一下 Color 的 fromRGBO 方法 .. 设置一下颜色的 rgb 的值 .. 还有一个不透明度的值 .. Color.fromRGBO(3, 54, 255, 1.0)

现在这个 Container 容器的大小就是它包装的子部件的尺寸 .. 在容器内部填充点内边距 .. 可以在容器里面添加一个 padding .. 它的值用一下 EdgetInsets 里的 only 这个方法 .. 然后我们可以分别去设置左边,上边,右边,还有下边的内边距 .. 添加一个 left 设置一下左边的内边距.. 24.0 ...

想在右边添加点内边距,就添加一个 right 属性,设置一下右边的内边距 .. 8.0 ..

如果你打算添加一个整体的固定的内边距 .. 可以使用 EdgeInsets 的 all 这个方法 .. 再给它一个整体的内边距 ..

容器的外面可以再加上外边距 .. 用的属性是 margin .. 对应的值用一下 EdgeInsets .. all .. 大小是 8.0 ..

使用 width 还有 height 可以设置容器的尺寸 .. 添加一个 width ... 设置一下容器的宽度 .. 大小是 90.0 .. 再添加一个 height .. 设置一下容器的高度 .. 大小也是 90.0 ..

Container:容器《 Flutter 移动应用:基础部件 》

统计

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

社会化网络

关于

微信订阅号

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