1 SizedBox
两种用法:一是可用来设置两个widget之间的间距,二是可以用来限制子组件的大小
2 构造函数
SizedBox({
Key key,
this.width,
this.height,
Widget child
})
3 常用属性
3.1 width:SizedBox的宽
width: 250,
3.2 height:SizedBox的高
height: 250,
3.3 child:SizedBox的子widget
child: Text("内容"),
4.显示效果
5.代码
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
// 字体适配
import '../../utils/app_size.dart';
class ListSizedBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('SizedBox'),
backgroundColor: Color(0xFFfafcff),
bottom: TabBar(labelColor: Color(0xff030303), tabs: [
Tab(
text: "效果",
),
Tab(
text: "属性",
)
]),
),
body: TabBarView(children: [
Container(
decoration: new BoxDecoration(
color: new Color(0xffffffff),
borderRadius: new BorderRadius.circular((AppSize.width(20))),
),
child: ShowEffect()),
Container(
decoration: new BoxDecoration(
color: new Color(0xffffffff),
borderRadius: new BorderRadius.circular((AppSize.width(20))),
),
child: ShowAttribute()),
]),
),
);
}
}
// 效果
class ShowEffect extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(children: <Widget>[
SizedBox(
width: 150.0,
height: 150.0,
child: Container(
margin: EdgeInsets.all(20.0),
width: 200.0,
height: 200.0,
color: Colors.blue,
),
),
SizedBox(
width: 100.0,
height: 100.0,
child: Container(
margin: EdgeInsets.all(20.0),
width: 200.0,
height: 200.0,
color: Colors.yellow,
),
),
SizedBox(
width: 100.0,
height: 100.0,
child: Container(
margin: EdgeInsets.all(20.0),
width: 200.0,
height: 200.0,
color: Colors.red,
),
)
]);
}
}
// 属性
class ShowAttribute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: FutureBuilder(
future: rootBundle.loadString('lib/markdown/sizedBox.md'),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return Markdown(
data: snapshot.data,
selectable: true,
);
} else {
return Center(
child: Text("加载中..."),
);
}
},
),
);
}
}
此代码已共享到码云,已对60多种widget做演示及解释。一直更新中
正文完