黑马程序员技术交流社区

标题: flutter中Container容器组件的使用 [打印本页]

---

作者: 小江哥    时间: 2019-5-24 17:09
标题: flutter中Container容器组件的使用

Container（容器控件）在Flutter是经常使用的控件，它就相当于我们HTML里的<div>标签，每个页面或者说每个视图都离不开它。那这节课我们就来学习一下。

在安装了Flutter和Dart插件以后，在VSCode的右下角显示No Devices,我们直接点击它，就会显示我们电脑中安装的虚拟机，如果你电脑上没有，也可以进行安装。

其实容器的作用就是方便我们进行布局的，Flutter这点也作的很好，我们先来看容器属性中的Alignment。

这个属性针对的是Container内child的对齐方式，也就是容器子内容的对齐方式，并不是容器本身的对齐方式。

先作一个效果：建立一个容器，然后容器内加入一段文字Hello JSPang, 并让它居中对齐。

具体代码如下：

[AppleScript] 纯文本查看 复制代码

import 'package:flutter/material.dart';void main () => runApp(MyApp());class MyApp extends StatelessWidget{  @override  Widget build(BuildContext context ){      return MaterialApp(        title:'Text widget',        home:Scaffold(          body:Center(           child:Container(             child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),             alignment: Alignment.center,           ),          ),        ),      );  }}

这时候可以看见，我们的文本已经居中显示在手机屏幕上了。当然它的对齐方式还有如下几种：

• bottomCenter:下部居中对齐。
• botomLeft: 下部左对齐。
• bottomRight：下部右对齐。
• center：纵横双向居中对齐。
• centerLeft：纵向居中横向居左对齐。
• centerRight：纵向居中横向居右对齐。
• topLeft：顶部左侧对齐。
• topCenter：顶部居中对齐。
• topRight： 顶部居左对齐。
  

设置宽、高和颜色属性

设置宽、高和颜色属性是相对容易的，只要在属性名称后面加入浮点型数字就可以了，比如要设置宽是500，高是400，颜色为亮蓝色。代码如下：

[AppleScript] 纯文本查看 复制代码

child:Container(  child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),  alignment: Alignment.center,  width:500.0,  height:400.0,  color: Colors.lightBlue,),

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2