无涯教程-Flutter - Row&Column

在前面的部分中，无涯教程学习了如何创建一个简单的Flutter应用程序及其对小部件的基本样式。现在，无涯教程将学习如何在屏幕上的行和列中排列小部件。行(rows)和列(columns)不是单个窗口小部件；它们是两个不同的小部件，分别是行和列。在这里，无涯教程将把这两个小部件集成在一起，因为它们具有相似的属性，可帮助无涯教程高效，快速地理解它们。

Hi无涯教程

1130人浏览 · 2024-07-07 10:26:08

Hi无涯教程 · 2024-07-07 10:26:08 发布

Row行部件

此小部件在屏幕上水平排列，如果子窗口小部件需要填充(fill)可用的水平空间，则必须将子窗口小部件包装在扩展窗口小部件中。

无涯教程可以使用属性crossAxisAlignment和mainAxisAlignment根据选择来控制行小部件如何对齐。

Note: Flutter行小部件还具有其他一些属性，例如mainAxisSize，textDirection，verticalDirection等。在这里，无涯教程将仅讨论mainAxisAlignment和crossAxisAlignment属性。

无涯教程可以在以下属性的帮助下将行的子节点对齐:

start - 它将子部件放置在主轴的前端。
end - 它将子部件放置在主轴的末端。
center - 它将子部件放置在主轴的中间。
spacebeen - 它将在子部件之间均匀地放置自由空间。
spacearound - 它将在第一个和最后一个子小部件均匀地分配之间的一半空间。
spaceevenly - 它将在第一个和最后一个子小部件平均分配空闲空间。

让无涯教程借助一个示例来理解它，在该示例中，无涯教程将对齐内容，以使子部件之间的均匀分配空间:

import package:flutter/material.dart;

void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Row Example"),
      ),
      body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children:<Widget>[
            Container(
              margin: EdgeInsets.all(12.0),
              padding: EdgeInsets.all(8.0),
              decoration:BoxDecoration(
                  borderRadius:BorderRadius.circular(8),
                  color:Colors.green
              ),
              child: Text("React.js",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),
            ),
            Container(
              margin: EdgeInsets.all(15.0),
              padding: EdgeInsets.all(8.0),
              decoration:BoxDecoration(
                  borderRadius:BorderRadius.circular(8),
                  color:Colors.green
              ),
              child: Text("Flutter",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),
            ),
            Container(
              margin: EdgeInsets.all(12.0),
              padding: EdgeInsets.all(8.0),
              decoration:BoxDecoration(
                  borderRadius:BorderRadius.circular(8),
                  color:Colors.green
              ),
              child: Text("MySQL",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),
            )
          ]
      ),
    );
  }
}

当无涯教程运行此应用时，无涯教程应该将UI作为下面的屏幕截图。

Column列部件

此小部件在屏幕上沿垂直方向排列其子部件。如果子窗口小部件需要填充可用的垂直空间，则必须将子窗口小部件包装在Expanded widget中。

无涯教程可以控制列窗口小部件如何使用属性mainaxisalignment和scrossaxisalign对齐其子部件。列的cross-axis将运行水平方向，而main axis将运行垂直方向。

让无涯教程借助一个示例来理解它，在该示例中，无涯教程将对齐内容，以使列中的子部件之间平均分配空间:

import package:flutter/material.dart;

void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Column Example"),
      ),
      body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children:<Widget>[
            Container(
              margin: EdgeInsets.all(20.0),
              padding: EdgeInsets.all(12.0),
              decoration:BoxDecoration(
                  borderRadius:BorderRadius.circular(8),
                  color:Colors.red
              ),
              child: Text("React.js",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),
            ),
            Container(
              margin: EdgeInsets.all(20.0),
              padding: EdgeInsets.all(12.0),
              decoration:BoxDecoration(
                  borderRadius:BorderRadius.circular(8),
                  color:Colors.red
              ),
              child: Text("Flutter",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),
            ),
            Container(
              margin: EdgeInsets.all(20.0),
              padding: EdgeInsets.all(12.0),
              decoration:BoxDecoration(
                  borderRadius:BorderRadius.circular(8),
                  color:Colors.red
              ),
              child: Text("MySQL",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),
            )
          ]
      ),
    );
  }
}

当无涯教程运行此应用时，无涯教程应该将UI作为下面的屏幕截图。

Flutter还允许开发人员使用crossAxisAlignment和mainAxisAlignment的组合将子小部件与行和列对齐。在该示例中，无涯教程将mainAxisAlignment设置为MainAxisAlignment.spaceAround，而crossAxisAlignment是CrossAxisAlignment.stretch。它将使列的高度等于主体的高度。