nly(left: 20.0,top: 10.0,right: 0,bottom: 0),
decoration: new BoxDecoration(
color: Colors.green,//填充色
border: new Border.all(
color: Colors.deepOrange,//边框颜色
),
borderRadius: BorderRadius.all(Radius.circular(10.0))//圆角大小
),
child: new _centerDemo(),
);
}
}
class _centerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: Text('Center Demo'),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'child demo',
home: new Scaffold(
appBar: AppBar(
title: new Text('child demo'),
),
body: new _containerDemo(),
),
);
}
}
class _containerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
width: 300.0,
height: 200.0,
// color: Colors.cyan,
margin: EdgeInsets.only(left: 20.0,top: 10.0,right: 0,bottom: 0),
decoration: new BoxDecoration(
color: Colors.green,//填充色
border: new Border.all(
color: Colors.deepOrange,//边框颜色
),
borderRadius: BorderRadius.all(Radius.circular(10.0))//圆角大小
),
child: new _alignDemo(),
);
}
}
class _alignDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Stack(
children: <Widget>[
new Align(
child: new Text('align demo 1'),
alignment: FractionalOffset.topLeft,//左上角
),
new Align(
child: new Text('align demo 2'),
alignment: FractionalOffset.center,//水平、垂直方向居中
),
new Align(
child: new Text('align demo 3'),
alignment: FractionalOffset.bottomRight,//右下角
),
],
);
}
}
布局行为分两种情况：
1.如果外部有约束的话，按照外部约束调整自身尺寸，然后缩放调整child，按照指定的条件进行布局。
2.如果外部没有约束条件的话，则跟child尺寸一致，指定的缩放以及位置属性将不起作用。
FittedBox有两个重要属性，fit和alignment
fit：缩放的方式，默认的属性是BoxFit.Contain，child在FittedBox范围内，尽可能大，但是不会超出其尺寸，这里需要注意一点，contain是在保持这child宽高比的大前提下，尽可能的填满，一般情况下，宽度或高度达到最大值时，就会停止缩放。
BoxFit.none：没有任何填充模式。
BoxFit.fill：全部覆盖，不按照宽高比填充，内容不会超过容器范围。
BoxFit.contain：按宽高比等比填充模式，内容不会超过容器范围。
BoxFit.cover：按原始尺寸填充整个容器模式，内容有可能会超过容器。
BoxFit.width：按照内容宽度填充整个容器，内容不会超过容器。
BoxFit.height：按照内容高度填充整个容器，内容不会超过容器。
Baseline基准线是指将所有元素底部放在同一条水平线上。
import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'child demo',
home: new Scaffold(
appBar: AppBar(
title: new Text('child demo'),
),
body: new _baselineDemo(),
),
);
}
}
class _baselineDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Row(
children: <Widget>[
new Baseline(
baseline: 100.0,
baselineType: TextBaseline.ideographic,
child: new Text('AaBbCcDd',style: TextStyle(fontSize: 30.0),),
),
],
);
}
}
Offstage的作用很简单，通过一个参数来控制child是否显示，也算是比较常用的组件
offstage属性：默认为true，表示不显示，当为false的时候，会显示该组件
import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
retur