Container控件即容器,是一个常用的控件,基础容器的实例:
import 'package:flutter/material.dart';
class ContainerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: new Container(
width: 128.0,height: 128.0,decoration: new BoxDecoration(
color: Colors.lightBlueAccent[100],),);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',home: new ContainerDemo(),);
}
ContainerDemo是一个无状态控件。Center控件使子控件在其内部水平和垂直居中,在上面实例中,Center控件使Container控件在其内部水平和垂直居中。Container控件通过width属性设置宽度为128,通过height属性设置高度为128。又通过decoration属性创建一个BoxDecoration对象,BoxDecoration对象描述如何绘制容器,在上面实例中,BoxDecoration对象通过backgroundColor属性为容器设置背景颜色。
class ContainerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: new Container(
width: 300.0,height: 400.0,decoration: new BoxDecoration(
color: const Color(0xfffce5cd),border: new Border.all(
color: const Color(0xff6d9eeb),width: 8.0,child: new Text('容器演示'),);
}
}
修改ContainerDemo控件的代码,设置border属性给容器添加边框。并创建Border对象,通过color属性为边框添加颜色,通过width属性为边框设置宽度。上面实例中的颜色”0xff“+”6d9eeb“,相当于#6d9eeb。最后还在容器内添加了一个Text控件,即文本控件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。