|
n new MaterialApp(
title: 'child demo',
home: new _offstageDemo()
);
}
}
class _offstageDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new _offstageDemoState();
}
}
class _offstageDemoState extends State {
bool _offstage = false;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: new Text('child demo'),
),
floatingActionButton: FloatingActionButton(onPressed: (){
setState(() {
_offstage = !_offstage;
});
}),
body: new Center(
child: new Offstage(
offstage: _offstage,
child: new Text('显示和隐藏',style: TextStyle(fontSize: 40.0),),
),
),
);
}
}
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 Row(
children: <Widget>[
new Container(
width: 100.0,
color: Colors.blue,
),
new LimitedBox(
maxWidth: 100,
child: new Container(
color: Colors.pink,
width: 300,
),
)
],
),
)
);
}
}
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 Container(
color: Colors.blue,
width: 200,
height: 200,
padding: EdgeInsets.all(20.0),
child: new OverflowBox(
alignment: Alignment.topLeft,
maxWidth: 200,
maxHeight: 200,
child: new Container(
color: Colors.pink,
),
),
),
)
);
}
}
SizedBox组件是一个特定大小的盒子，这个组件强制它的child有特定的宽度和高度，如果宽度和高度为null，则此组件将调整自身的大小以匹配该维度中child的大小
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 SizedBox(
width: 200,
height: 200,
child: new Container(
width: 100,
height: 600,
color: Colors.blue,
),
),
)
);
}
}
以上就是单个子元素的布局Widget的梳理，并不是很全，我只是把我认为在开发中可能会经常用到的Widget梳理了一下，也方便自己以后查看！！！
|