|
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,),
| 
收藏
淘帖
踩
