Flutter基础布局Align小部件学习:对齐单个小部件

2020年2月23日09:11:57 发表评论 77 views

Flutter 基础布局Align小部件的学习。一般来说,Align的使用都是其他控件的一个参数,目的是为了设置子child的对齐方式,比如居中,左上,右下等多个对齐方向,其本身用法也多灵活。

Center(
 child: Container(
 t//宽高
 height: 120.0,
 width: 120.0,
 //颜色
 color: [50],
 //重头戏,布局组件
 child: Align(
 //顶部 右边对齐
 alignment: ,
 child: FlutterLogo(
 size: 60,
 ),
 ),
 ),
)
Flutter基础布局Align小部件学习:对齐单个小部件

接下来我们看看构造函数吧

const Align({
 Key key,
 this.alignment = ,
 this.widthFactor,
 this.heightFactor,
 Widget child
 })

alignment 设置对齐方向,使有多种使用方式: 比如:FractionalOffset(0.5, 0.5) == Alignment() == ,都是将子child居中对齐的控制方式 Alignment()表示矩形的中心。从到+的距离是矩形的一边到另一边的距离。 而Alignment中还可以这样使用对齐方式的控制,也是较为常用的使用方式:

如何对齐小部件

要将子窗口小部件在其父窗口中对齐,请使用该Align窗口小部件。如果您知道如何使用Center小部件,那么您是对的,因为Center这只是的特例Align。

将您希望对齐的小部件与“对齐”小部件包装起来并设置其对齐属性。例如,这将使文本小部件与父级的右中间对齐。

Align(
 alignment: Right,
 child: Text("widget"),
)

其他选项是

  • Left
  • Right
Flutter基础布局Align小部件学习:对齐单个小部件

您不仅限于这些位置。您可以在任何位置对齐窗口小部件。通过指定x,y对,其中(0,0)是视图的中心,而边缘是围绕它的单位。也许图像会有所帮助:

Flutter基础布局Align小部件学习:对齐单个小部件

任何相对位置在哪里 (x,y)

  • 是 Alignment(, )
  • 是 Alignment(0.0, )
  • 是 Alignment(, )
  • Left 是 Alignment(, 0.0)
  • 是 Alignment(0.0, 0.0)
  • Right 是 Alignment(, 0.0)
  • 是 Alignment(, )
  • 是 Alignment(0.0, )
  • 是 Alignment(, )

请注意,图像中的对齐方式(x,y)不必在该范围内[-1, +1]。对齐(1,2)意味着它在小部件的右侧,在小部件的下方,高度又是其高度的一半。

这是自定义对齐位置的示例。

Align(
 alignment: Alignment(0.7, -0.5),
 child: Text("widget"),
)
Flutter基础布局Align小部件学习:对齐单个小部件

补充代码

这是用于制作以上示例的代码,以方便剪切和粘贴。

import 'package:flutter/material.dart';

void main() =< runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: Scaffold(
 appBar: AppBar(),
 body: myLayoutWidget(),
 ),
 );
 }
}

Widget myLayoutWidget() {
 return Align(
 alignment: Alignment(0.7, -0.5),
 child: Text(
 "widget",
 style: TextStyle(fontSize: 30),
 ),
 );
}

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: