如何在 Flutter 中对齐单个小部件? [英] How to align single widgets in Flutter?
问题描述
我想在其父级中对齐 Flutter 小部件.我知道我可以通过将小部件包装在一个中心小部件中来使其居中.
中心(孩子:文本(小部件"),)
但是如何将其与右侧、底部、顶部中间等对齐?
注意事项:
我说的是一个孩子,而不是一行或一列中的多个孩子.请参阅这些 SO 问题:
您不仅限于这些地点.您可以在任何地方对齐您的小部件.通过指定一个 x,y 对,其中
(0,0)
是视图的中心,边缘是围绕它的1.0
单位.也许图片会有所帮助:where 为任何相对位置
(x,y)
Alignment.topLeft
是Alignment(-1.0, -1.0)
Alignment.topCenter
是Alignment(0.0, -1.0)
Alignment.topRight
是Alignment(1.0, -1.0)
Alignment.centerLeft
是Alignment(-1.0, 0.0)
Alignment.center
是Alignment(0.0, 0.0)
Alignment.centerRight
是Alignment(1.0, 0.0)
Alignment.bottomLeft
是Alignment(-1.0, 1.0)
Alignment.bottomCenter
是Alignment(0.0, 1.0)
Alignment.bottomRight
是Alignment(1.0, 1.0)
注意图中的对齐方式
(x,y)
不需要在[-1, +1]
范围内.对齐方式(1,2)
表示它位于小部件的右侧,再低于小部件的一半高度.这是自定义对齐位置的示例.
对齐(对齐:对齐(0.7,-0.5),孩子:文本(小部件"),)
补充代码
这是用于制作上述示例的
main.dart
代码,以方便您进行剪切和粘贴.import 'package:flutter/material.dart';void main() =>运行应用程序(我的应用程序());class MyApp 扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回 MaterialApp(主页: 脚手架(应用栏:应用栏(),正文:myLayoutWidget(),),);}}小部件 myLayoutWidget() {返回对齐(对齐:对齐(0.7,-0.5),孩子:文本("小部件",样式:TextStyle(字体大小:30),),);}
I want to align a Flutter widget within its parent. I know that I can center a widget by wrapping it in a Center widget.
Center( child: Text("widget"), )
But how do I align it to the right, bottom, top middle, etc?
Notes:
I am talking about a single child, not multiple children in a Row or Column. See these SO questions:
This one is on the right track but I am trying to make a more cannonical question:
解决方案How to align widgets
To align a child widget within its parent you use the
Align
widget. If you know how to use theCenter
widget then you are the right track becauseCenter
is just a special case ofAlign
.Wrap the widget you wish to align with the Align widget and set its alignment property. For example, this would align a text widget to the middle right of the parent.
Align( alignment: Alignment.centerRight, child: Text("widget"), )
Other options are
Alignment.topLeft
Alignment.topCenter
Alignment.topRight
Alignment.centerLeft
Alignment.center
Alignment.centerRight
Alignment.bottomLeft
Alignment.bottomCenter
Alignment.bottomRight
Here is what that looks like:
You are not limited to these locations. You can align your widget anywhere. by specifying an x,y pair, where
(0,0)
is the center of the view and the edges are1.0
unit around it. Maybe an image would help:where for any relative position
(x,y)
Alignment.topLeft
isAlignment(-1.0, -1.0)
Alignment.topCenter
isAlignment(0.0, -1.0)
Alignment.topRight
isAlignment(1.0, -1.0)
Alignment.centerLeft
isAlignment(-1.0, 0.0)
Alignment.center
isAlignment(0.0, 0.0)
Alignment.centerRight
isAlignment(1.0, 0.0)
Alignment.bottomLeft
isAlignment(-1.0, 1.0)
Alignment.bottomCenter
isAlignment(0.0, 1.0)
Alignment.bottomRight
isAlignment(1.0, 1.0)
Notice in the image that the alignment
(x,y)
doesn't need to be within the range[-1, +1]
. The alignment(1,2)
means it is at the right side of the widget and below the widget half again as much as its height.Here is an example of a custom alignment position.
Align( alignment: Alignment(0.7, -0.5), child: Text("widget"), )
Supplemental code
Here is the
main.dart
code used to make the above examples for your cut-and-paste convenience.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), ), ); }
这篇关于如何在 Flutter 中对齐单个小部件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!