|
Scaffold(
appBar: AppBar(
title: new Text('Children Demo'),
),
body: new Center(
child: new Stack(
children: <Widget>[
new Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
),
new Positioned(
top: 20.0,
left: 50.0,
child: new Text('这是一段文本')
)
],
),
),
),
);
}
}
IndexedStack继承自Stack，它的作用是显示第index个child，其他的child都是不可见的，所以IndexedStack的尺寸永远是和最大的子节点尺寸一致。由于IndexedStack是继承自Stack，所以它只比Stack多了一个index属性，即对应child的索引。
Demo示例：
import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Children Demo',
home: new Scaffold(
appBar: AppBar(
title: new Text('Children Demo'),
),
body: new Center(
child: new IndexedStack(
index: 1,
children: <Widget>[
new Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
),
new Positioned(
top: 20.0,
left: 50.0,
child: new Text('这是一段文本')
)
],
),
),
),
);
}
}
Table表格布局，每一行的高度由其内容决定，每一列的宽度由columnWidths属性单独控制。
Table组件常见属性如下：
columnWidths：设置每一列的宽度。
defaultColumnWidth：默认的每一列宽度，默认情况下均分。
textDirection：文字方向。
border：表格边框。
defaultVerticalAlignment：默认垂直方向的对齐方式，top 放置在顶部、middle 垂直居中、bottom 放置在底部、baseline 文本baseline对齐、fill 充满整个cell
import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Children Demo',
home: new Scaffold(
appBar: AppBar(
title: new Text('Children Demo'),
),
body: new Table(
defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
// 设置表格有多少列，并且指定列宽
columnWidths:const <int,TableColumnWidth> {
0:FixedColumnWidth(40.0),
1:FixedColumnWidth(40.0),
2:FixedColumnWidth(60.0),
3:FixedColumnWidth(60.0),
4:FixedColumnWidth(130.0),
},
// 设置表格边框样式
border: TableBorder.all(
color: Colors.blue,
width: 2.0,
style: BorderStyle.solid
),
children: const <TableRow>[
// 添加第一行数据
TableRow(
children: <Widget>[
SizedBox(
child: Text('姓名'),
height: 30,
),
Text('性别'),
Text('年龄'),
Text('身高'),
Text('备注'),
],
),
// 添加第二行数据
TableRow(
children: <Widget>[
Text('张三'),
Text('男'),
Text('20'),
Text('186'),
Text('学渣'),
],
),
// 添加第三行数据
TableRow(
children: <Widget>[
Text('李四'),
Text('男'),
Text('20'),
Text('188'),
Text('学酥'),
],
),
// 添加第四行数据
TableRow(
children: <Widget>[
Text('王五'),
Text('男'),
Text('21'),
Text('177'),
Text('学霸'),
],
),
// 添加第五行数据
TableRow(
children: <Widget>[
Text('小梅'),
Text('女'),
Text('22'),
Text('170'),
Text('学神，需要重点培养'),
],
),
],
),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Children Demo',
home: new Scaffold(
appBar: AppBar(
title: new Text('Children Demo'),
),
body: new Wrap(
spacing: 3.0,
runSpacing: 20.0,//纵轴方向的间距
alignment: WrapAlignment.end,//纵轴方向的对其方式
children: |