在前面的部分中,无涯教程学习了如何创建一个简单的Flutter应用程序及其对小部件的基本样式。现在,无涯教程将学习如何在屏幕上的行和列中排列小部件。行(rows)和列(columns)不是单个窗口小部件;它们是两个不同的小部件,分别是行和列。在这里,无涯教程将把这两个小部件集成在一起,因为它们具有相似的属性,可帮助无涯教程高效,快速地理解它们。
此小部件在屏幕上水平排列,如果子窗口小部件需要填充(fill)可用的水平空间,则必须将子窗口小部件包装在扩展窗口小部件中。
无涯教程可以使用属性crossAxisAlignment和mainAxisAlignment根据选择来控制行小部件如何对齐。
链接:https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-row-and-column.html
来源:LearnFk无涯教程网
无涯教程可以在以下属性的帮助下将行的子节点对齐:
让无涯教程借助一个示例来理解它,在该示例中,无涯教程将对齐内容,以使子部件之间的均匀分配空间:
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作为下面的屏幕截图。
此小部件在屏幕上沿垂直方向排列其子部件。如果子窗口小部件需要填充可用的垂直空间,则必须将子窗口小部件包装在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。它将使列的高度等于主体的高度。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)