Skip to content

F
Flutter_app
提交 ed1d6b21 作者: dbj
操作

容器类组件提交

上级 8a1167f6
正在显示 包含 135 行增加 和 45 行删除
doc/dingbaojie/20200313Flutter容器类组件学习（1）/填充、尺寸限制类容器、装饰容器、变换 → doc/dingbaojie/20200313Flutter容器类组件学习（1）/填充、尺寸限制类容器、装饰容器、变换、容器
填充要点记录:
填充要点记录:
......@@ -33,4 +33,34 @@ UnconstrainedBox对父组件限制的“去除”并非是真正的去除：上
装饰容器DecoratedBox
DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等
decoration：代表将要绘制的装饰，它的类型为Decoration。Decoration是一个抽象类，它定义了一个接口 createBoxPainter()，
子类的主要职责是需要通过实现它来创建一个画笔，该画笔用于绘制装饰。
position：此属性决定在哪里绘制Decoration，它接收DecorationPosition的枚举类型，该枚举类有两个值：
background：在子组件之后绘制，即背景装饰。
foreground：在子组件之上绘制，即前景。
变换（Transform）
Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效.
平移
Transform.translate接收一个offset参数，可以在绘制时沿x、y轴对子组件平移指定的距离
旋转
Transform.rotate可以对子组件进行旋转变换
缩放
Transform.scale可以对子组件进行缩小或放大
注意
Transform的变换是应用在绘制阶段，而并不是应用在布局(layout)阶段，
所以无论对子组件应用何种变化，其占用空间的大小和在屏幕上的位置都是固定不变的，因为这些是在布局阶段就确定的
RotatedBox
RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，
但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子组件的位置和大小
Container
Container是一个组合类容器，它本身不对应具体的RenderObject，
它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器，
前面我们已经通过一个Container组件实现同时需要装饰、变换、限制的场景了，具体使用方法场景前面例子都已经展示过了。
lib/dingbaojie/FirstDay/DecoratedBoxDemo.dart
......@@ -10,49 +10,22 @@ class DecoratedBoxDemo extends StatelessWidget{
appBar:
AppBar(title: Text("装饰容器"), automaticallyImplyLeading: false),
body: Center(
child: Padding(
//上下左右各添加16像素补白
padding: EdgeInsets.all(16.0),
child: Column(
//显式指定对齐方式为左对齐，排除对齐干扰
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)"),
Padding(
//左边添加8像素补白
padding: const EdgeInsets.only(left: 40.0,top: 10.0,bottom: 30),
child: Text("EdgeInsets.only"),
),
Text("symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right"),
Padding(
//上下各添加8像素补白
padding: const EdgeInsets.symmetric(vertical: 30.0),
child: Text(" EdgeInsets.symmetric"),
),
Text("fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充"),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.fromLTRB(20.0,10.0,20.0,20.0),
child: Text("EdgeInsets.fromLTRB"),
),
Text("all(double value) : 所有方向均使用相同数值的填充。"),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.all(30),
child: Text("EdgeInsets.all"),
),
RaisedButton(
child: Text("带参跳转页面"),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SizelimitedDemo()),
);
},
),
],
child: DecoratedBox(
decoration: BoxDecoration(
//Flutter中还提供了其它渐变配置类，如RadialGradient、SweepGradient
gradient: LinearGradient(colors:[Colors.blue,Colors.blueAccent[700]]), //背景渐变
borderRadius: BorderRadius.circular(15.0), //3像素圆角
boxShadow: [ //阴影
BoxShadow(
color:Colors.black54,
offset: Offset(2.0,2.0),
blurRadius: 4.0
)
]
),
child: Padding(padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
child: Text("DecoratedBox", style: TextStyle(color: Colors.white),),
)
)
),
......
lib/dingbaojie/FirstDay/PaddingDemo.dart
import 'package:flutter/material.dart';
import 'SizelimitedDemo.dart';
import 'DecoratedBoxDemo.dart';
import 'TransformDemo.dart';
class PaddingDemo extends StatelessWidget{
......@@ -42,7 +45,7 @@ class PaddingDemo extends StatelessWidget{
child: Text("EdgeInsets.all"),
),
RaisedButton(
child: Text("带参跳转页面"),
child: Text("尺寸限制类容器"),
onPressed: () {
Navigator.push(
context,
......@@ -50,7 +53,24 @@ class PaddingDemo extends StatelessWidget{
);
},
),
RaisedButton(
child: Text("装饰容器"),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new DecoratedBoxDemo()),
);
},
),
RaisedButton(
child: Text("变换"),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new TransformDemo()),
);
},
),
],
),
)
......
lib/dingbaojie/FirstDay/TransformDemo.dart 0 → 100644
import 'package:flutter/material.dart';
import 'dart:math' as math;
class TransformDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:
AppBar(title: Text("变换"), automaticallyImplyLeading: false),
body: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 80.0,bottom: 40.0),
child: DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
//默认原点为左上角，左移20像素，向上平移5像素
child: Transform.translate(
offset: Offset(-20.0, -5.0),
child: Text("Hello world"),
),
),
),
Container(
margin: EdgeInsets.only(bottom: 40.0),
child: DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
child: Transform.rotate(
//旋转90度
angle:math.pi/2 ,
child: Text("Hello world"),
),
)
),
Container(
margin: EdgeInsets.only(bottom: 40.0),
child:DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
child: Transform.scale(
scale: 1.5, //放大到1.5倍
child: Text("Hello world")
)
)
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
//将Transform.rotate换成RotatedBox
child: RotatedBox(
quarterTurns: 1, //旋转90度(1/4圈)
child: Text("Hello world"),
),
),
Text("你好", style: TextStyle(color: Colors.green, fontSize: 26.0),)
],
),
],
),
);
}
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论