如何在Flutter中对齐单个小部件？ [英] How to align single widgets in Flutter?

问题描述

我想在其父级中对齐Flutter小部件。我知道我可以通过将其包装在Center窗口小部件中来居中。

  Center（
 child：Text（  widget），
）
  

但是我如何将其与右侧，底部对齐，中上等？

注意：

我在说的是一个孩子，而不是多个孩子在行或列中。请参阅以下SO问题：

• 
  
  

  您不仅限于这些位置。您可以在任何位置对齐窗口小部件。通过指定一个x，y对，其中（0,0）是视图的中心，边缘为 1.0 周围的单位。也许图像会有所帮助：

  
  
  
  
  
  

  其中任何相对位置（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）表示它在小部件的右侧，在小部件的下方，高度又是其高度的一半。

  
  
  

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

    Align（
   alignment：Alignment （0.7，-0.5），
  子级：Text（ widget），
  ）
    

  
  
  

  补充代码

  
  
  

  这是 main.dart 代码，用于为您的剪切和切割制作以上示例

    import'package：flutter / material.dart'; 
   
   void main（）=> runApp（MyApp（））; 
   
  类MyApp扩展了StatelessWidget {
   @override 
   Widget build（BuildContext context）{
   return MaterialApp（
   home：Scaffold（
   appBar ：AppBar（），
  正文：myLayoutWidget（），
  ），
  ）; 
  } 
  } 
   
  小部件myLayoutWidget（）{
   return Align（
  alignment：Alignment（0.7，-0.5），
  子级： Text（
   widget，
  样式：TextStyle（fontSize：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:

  • Align Text widgets in a row widget
  • FLUTTER | Right Align not working

  This one is on the right track but I am trying to make a more cannonical question:

  • How to left align the OutlineButton icon in Flutter

  解决方案

  How to align widgets

  To align a child widget within its parent you use the Align widget. If you know how to use the Center widget then you are the right track because Center is just a special case of Align.

  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 are 1.0 unit around it. Maybe an image would help:

  where for any relative position (x,y)

  • Alignment.topLeft is Alignment(-1.0, -1.0)
  • Alignment.topCenter is Alignment(0.0, -1.0)
  • Alignment.topRight is Alignment(1.0, -1.0)
  • Alignment.centerLeft is Alignment(-1.0, 0.0)
  • Alignment.center is Alignment(0.0, 0.0)
  • Alignment.centerRight is Alignment(1.0, 0.0)
  • Alignment.bottomLeft is Alignment(-1.0, 1.0)
  • Alignment.bottomCenter is Alignment(0.0, 1.0)
  • Alignment.bottomRight is Alignment(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屋！