Flutter Widget之Container
Widget:https://flutter.io/docs/development/ui/widgets
Container:https://docs.flutter.io/flutter/widgets/Container-class.html
import 'package:flutter/material.dart';
class ContainerDemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _ContainerDemoPageState();
}
class _ContainerDemoPageState extends State<ContainerDemoPage> {
@override
Widget build(BuildContext context) {
Expanded imageExpanded(String img) {
return new Expanded(child: new Container(
decoration: new BoxDecoration(
border: new Border.all(width: 10.0, color: Colors.black38),
borderRadius: const BorderRadius.all(
const Radius.circular(8.0))),
margin: const EdgeInsets.all(4.0),
child: new Image.asset(img),
));
}
var container = new Container(
decoration: new BoxDecoration(color: Colors.black26),
child: new Column(
children: <Widget>[
new Row(children: <Widget>[
imageExpanded('images/lion.jpg'),
imageExpanded('images/parrot.jpg'),
],),
new Row(children: <Widget>[
imageExpanded('images/dog.jpg'),
imageExpanded('images/cat.jpg'),
],),
new Row(children: <Widget>[
imageExpanded('images/husky.jpg'),
],)
],
),
);
return new Scaffold(
appBar: new AppBar(title: new Text('Container Page Demo'),),
// body: new SingleChildScrollView(
// child: new Center(
// child: container,
// ),
// )
body: Center(
// child: Container(
// margin: const EdgeInsets.all(10.0),
// color: const Color(0xFF00FF00),
// width: 48.0,
// height: 48.0,
// ),
child: Container(
constraints: BoxConstraints.expand(
height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
),
padding: const EdgeInsets.all(8.0),
color: Colors.teal.shade700,
alignment: Alignment.center,
child: Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('http://www.appblog.com/css/images/logo128.jpg'),
centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
),
),
transform: Matrix4.rotationZ(0.1),
)
),
);
}
}
版权声明:
作者:Joe.Ye
链接:https://www.appblog.cn/index.php/2023/03/16/flutter-widget-container/
来源:APP全栈技术分享
文章版权归作者所有,未经允许请勿转载。
THE END
0
二维码
打赏
海报
Flutter Widget之Container
Widget:https://flutter.io/docs/development/ui/widgets
Container:https://docs.flutter.io/flutter/widgets/Container-class.html
import 'package……
文章目录
关闭
共有 0 条评论