Flutter - mainAxisAlignment不适用于列中的行
Flutter是一种跨平台的移动应用开发框架，可以同时开发iOS和Android应用。它使用Dart语言进行开发，具有快速开发、高性能和漂亮的用户界面等优势。
在Flutter中，主轴对齐（mainAxisAlignment）是指在容器中沿着主轴（水平或垂直）对子组件进行对齐的方式。然而，主轴对齐属性在列（Column）中的行（Row）上是不适用的。
在列中的行，主轴对齐属性不会起作用，因为列的主轴是垂直的，而行的主轴是水平的。在这种情况下，可以使用交叉轴对齐（crossAxisAlignment）属性来对齐行中的子组件。
交叉轴对齐属性（crossAxisAlignment）用于控制行中子组件在交叉轴上的对齐方式。交叉轴可以是垂直轴或水平轴，具体取决于父容器的主轴方向。常见的交叉轴对齐方式包括起始对齐（start）、居中对齐（center）、末尾对齐（end）和拉伸对齐（stretch）等。
对于该问题，可以使用交叉轴对齐属性来对齐行中的子组件。例如，可以将交叉轴对齐属性设置为居中对齐（crossAxisAlignment: CrossAxisAlignment.center），使行中的子组件在垂直方向上居中对齐。
腾讯云提供了一系列与Flutter相关的产品和服务，例如云开发（Tencent Cloud Base），它是一种无服务器的云开发平台，可以帮助开发者快速构建和部署Flutter应用。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于云开发的信息。
请注意，本答案中没有提及其他云计算品牌商，如有需要可以自行搜索相关信息。
相关·内容
3回答
当我在列中添加一行时，我得到了一个错误。我收到以下错误：
I/flutter ( 6449): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 6449): The following assertion was thrown during performLayout():
I/flutter ( 6449): BoxConstraints forces an infinite width.
I/flutter ( 6
浏览 2提问于2018-09-21得票数 44
回答已采纳
2回答
下面的颤振布局(列内两行，每一行包含一个文本小部件和一个字段小部件)编译并运行--但文本和文本字段小部件没有显示。您应该看到的是单词"username“后面是一行中的文本字段，而"password”则是下一行中的文本字段。我做错什么了，拜托？
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext conte
浏览 0提问于2018-05-14得票数 9
回答已采纳
我有一个简单的布局，由一个列组成，没有几个子列。其中一些行也包含子行。我在列的子列之间添加了分隔符，在行的子行之间添加了VerticalDividers。(水平)分隔器显示得很好。然而，VerticalDividers没有显示在应用程序中。
我已经尝试过将行子封装在其他布局小部件中，比如容器，但是似乎没有什么工作。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Wid
浏览 1提问于2019-05-17得票数 5
回答已采纳
我是个新手，我做了一些随机的积木来练习我的知识。我试图制作三列，其中最后一列将包含两行，所有列都在一列中，它们都在一张卡中，widget.My列工作得很好，但我的行容器不工作。作为一个新手，我不能理解我在哪里错过了什么，或者我做错了什么。 我试着让这个视图变成screenshot 这是我的代码-- > import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extend
浏览 4提问于2020-12-15得票数 0
回答已采纳
我将以下内容放在类似于下面的列中
Widget _getDropDownCombo()
{
Widget combo = new DropdownButton(
value: _currentItem,
items:_dropDownMenuItems,
onChanged: _changedDropDownItem
);
return Flexible(child:combo);
}
_getDropDownCombo是从类似于下面这样的行
浏览 5提问于2019-01-26得票数 1
我有一个包含两列信息的Card小部件。最左边的列包含图标上方的一行文字--我想要卡片顶部的文字和底部的图标。卡片的高度由右边的列(它有一个更大的图标和它下面的文本行)来表示。但我无法让MainAxisAlignment.spaceBetween做好它的工作--第一栏总是挤在一起，不管是在顶部/中心还是底部，这取决于我如何设置封闭行的crossAxisAlignment。
我尝试过在文本和图标之间放置一个SizedBox，这确实会将它们分隔开--但是编码布局的全部要点是它应该能够推断出这些空间。我不想硬编码它；它是由基于较大的右侧列的卡片大小来定义的。
import 'package:f
浏览 0提问于2019-08-14得票数 3
回答已采纳
这是我在观看Flutter教程时遇到的问题。假设我们有一列，然后在列中，其中一个子元素是一行，它也包含子元素。然后，由于未知的原因，不是一行的列的子项变得水平居中。在本例中，mainAxisAlignment设置为MainAxisAlignment.center。现在，本教程提供了一种优雅的解决方案，使非行子元素与行的列的子元素对齐，即将crossAxisAlignment设置为CrossAxisAlignment.start。 我只是想知道为什么会发生这种现象。可能是因为通过插入一行，它以编程方式将列的crossAxisAlignment设置为CrossAxisAlignment.cent
浏览 13提问于2021-09-25得票数 0
回答已采纳
你好，我有下面的dart代码，我希望CupertinoButton是橙色的，但无论我做什么，它都是灰色的。我试着把它换成不同的颜色，但它仍然是灰色的。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
浏览 0提问于2018-04-27得票数 0
2回答
我的UI屏幕基本上是使用Column小部件呈现的，在这个小部件中，我插入了所有其他UI组件。其中一个恰好是Row (由2个文本字段组成)。这是行小部件：
var phoneNumber = new Row(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(20.0),
child: countryCodePicker,
),
new Padding(
padding: const EdgeInsets.all(20.0),
chi
浏览 0提问于2019-03-19得票数 30
回答已采纳
11回答
我得到了一个呈现异常，我不知道如何修复。我正在尝试创建一个有3行的列。
行图像
行TextField
行按钮
下面是构建容器的代码：
Container buildEnterAppContainer(BuildContext context) {
var container = new Container(
padding: const EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <
浏览 4提问于2017-08-31得票数 282
回答已采纳
1回答
如何将第一列与顶部对齐？ 我来自Android开发背景，通常我只会在容器上使用gravity="top"。 但是我如何在Flutter中做到这一点呢？ import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWid
浏览 20提问于2020-01-31得票数 1
回答已采纳
1回答
ConstrainedBox中有两行。以及第一行中的两个小部件，然后我想给出它们之间的空间。第二行中只有一个小部件，其大小总是不一样(就像聊天中的文本)。问题是第一行的长度没有跟在第二排之后，怎么解决呢？谢谢!
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 300 ) ,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAli
浏览 2提问于2022-04-30得票数 0
回答已采纳
2回答
我需要在列中放置分隔符，但分隔符不会出现。我看到了一些关于行的问题不应该使用，但在我的情况下，我需要行。下面是最简单的代码，我需要显示分隔符
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp
浏览 2提问于2022-07-21得票数 0
使用行或列小部件将导致以下错误：
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
Horizontal RenderFlex with MainAxisAlignment.start has a null textDirection, so the alignment cannot be resolved.
'package:flutter/src/rendering/flex.dart':
Failed assertion:
浏览 0提问于2020-11-11得票数 0
回答已采纳
3回答
我正在尝试将一行小部件安装到容器中，但是当我将主轴对齐的属性设置为MainAxisAlignment.spaceBetween时，它似乎会溢出。这将导致行(字体棒图标)溢出容器的宽度。我不知道如何使这一行与容器的宽度相吻合。当试图用扩展的小部件包装行时，我会得到呈现错误。
不知道我哪里出了问题。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_
浏览 7提问于2022-03-04得票数 1
回答已采纳
1回答
我创建了一个包含RichText的行，在RichText中，我创建了TextSpan，其中包含TextSpan和WidgetSpan的子元素。 问题:当我尝试在带有SVG图像的TextSpan之间添加WidgetSpan时，网站无法加载。如何让SVG图像在TextSpans之间显示？ 当我的网站不能加载时，Flutter会给我这个错误，当我删除WidgetSpan时，它就消失了。 另一个异常被抛出: Assertion：'‘另一个异常被抛出:Assertion failed: file:///Users/ned/Developer/flutter/packages/flutter/l
浏览 21提问于2020-07-02得票数 0
我正在使用RenderRepaintBoundary/GlobalKey技术将Widget转换为图像文件。问题是，当我将Widget转换为图像文件时，Widget中的任何子图像小部件都会消失，但是屏幕上的其他所有东西，除了子图像小部件，都会将其转换为图像文件。
这是我的密码。它基本上是一个带有按钮和图像的屏幕。如果单击该按钮，则会获取Widget的图像快照，然后应用程序将显示此快照，而不会显示其他任何内容。因此，子图像就消失了。下面还有更多的解释：
import 'package:flutter/material.dart';
import 'dart:io';
浏览 3提问于2022-08-08得票数 2
3回答
我们知道，默认情况下，列水平地以为中心，如果它有完整的width.But，当我在一列中放置两张卡片和一行时，两张卡片是通过颤振水平中心放置的，而行在它的起始位置仍然是相同的？为什么？
我认为行应该是水平中心的，因为在我的例子中它是列的子列，但它不是。
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter App'),
),
body: Container(
color: Col
浏览 1提问于2020-08-17得票数 2
回答已采纳
3回答
我想创造这个效果。
我现在已经有了这个效果。
这是我的代码
return Scaffold(
body: SafeArea(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 12),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
浏览 0提问于2020-12-08得票数 0
2回答
我试图使包含“短标签”的Row像它下面的Row一样宽。
放置mainAxisSize: MainAxisSize.max不是完全正确的，因为它应该与父级宽度相匹配，基于以下答案：
尝试使用Expanded外部行，但它会导致一个错误，同样使用SizedBox.expand。不能使用像width: double.infinity这样的约束，因为左边的行(代码中的// Left part)必须只占用它所需的空间，其余的必须从黄色容器中提取。
截图和代码如下：
import 'package:flutter/material.dart';
void main() {
r
浏览 0提问于2020-07-25得票数 1
回答已采纳
1回答
我在flutter中创建了一个测验，并且我想创建一个Wrap小部件，因为有一些很长的问题(文本)，不能放在一行中。我应该把我的Wrap小工具放在哪里？我尝试用Wrap小部件替换每个简单的Row小部件，但它们似乎都不起作用。此外，还有一个链接，其中包含如何使用我遵循的Wrap小部件的说明：https://medium.com/flutter-community/flutter-wrap-widget-e1ee0b005b16 Thanks.This是我的代码： ` import 'package:flutter/cupertino.dart';
import 'pack
浏览 36提问于2020-04-10得票数 0
我有一个颤振的应用程序，在其中一个页面中，它提供了一个200多个项目的列表。我如何做到这一点:当应用程序在桌面环境中运行时，它会动态显示多个列，而在手机上运行时，它会显示单个列，或者当它运行在垂直方向的平板电脑上时，当设备处于水平方向时，它会显示一列和多列？
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: ke
浏览 7提问于2022-01-31得票数 0
回答已采纳
3回答
我试图在一个示例项目中使用扩展的小部件。我在列小部件中嵌入了一行作为子程序。在行中，我使用了带有.But属性的扩展小部件，在删除展开后，我无法在屏幕上看到任何内容，它可以工作。我试着把展开放在列前面，它也显示了同样的错误。这是我的密码：-
import 'package:flutter/material.dart';
void main() => runApp(
const MaterialApp(home: MyApp())
);
class MyApp extends StatefulWidget {
const MyApp({Key? key}) :
浏览 10提问于2022-01-01得票数 0
回答已采纳
使用MediaQuery，我可以获得三星S7边缘屏幕大小的高度和宽度，这样我就可以使用它了。但是如何使用MediaQuery在ListTile中布局多列动态文本呢？在我的演示项目中，我将文本大小设置为12，在三星S6中我会遇到溢出问题.关于颤振中的文字比例因子，有什么信息或例子吗？
我在这里找到了一个解决方案()，并尝试构建演示项目。S6 textScaleFactor是1.1，S7是1.0.
我最初用S7文本大小测试它的演示程序是12。当我尝试用S6测试它时，我会遇到溢出问题.我需要缩小或使用MediaQuery来设置文本缩放因子，这样它就可以工作大多数设备而不会出现溢出问题？
在ListT
浏览 1提问于2018-08-10得票数 7
回答已采纳
1回答
我正在尝试构建一个相当简单的Flutter表单，它由三行组成，其中前两行每行包含三列。因此，我制作了一个表单，其中包含一个作为子元素的填充，而这个填充包含一个作为子元素的列，它最终包含三行： Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Padding(
padding: EdgeInsets.all(16.0),
浏览 9提问于2020-09-17得票数 1
回答已采纳
2回答
如何从颜色列表中为容器分配颜色？
、、、、
如何从颜色列表中为我的行分配颜色这里是代码。
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme:
浏览 4提问于2021-12-01得票数 0
回答已采纳
1回答
在我的一个Flutter文件中，我有这样一段代码，从理论上讲，它运行起来根本不应该是一个问题。它在调试版本中呈现得很好，但是当我构建一个发布的iOS和Android应用程序文件时，它就变得部分不可见了。有一个可以渲染的小部件，叫做_heyName()，它只是一个文本小部件。_whatWouldYouLike()小部件几乎是_heyName()小部件的1:1副本，但是这个小部件不会呈现，之后的任何小部件也不会呈现。 但是控制台确实抛出了这个警告： ======== Exception caught by widgets library =============================
浏览 7提问于2021-07-23得票数 0
回答已采纳
1回答
颤振行消失在建筑上？
、、、
我正在构建一个聊天应用程序flutter页面，我的Textfield / Send行一直在消失，我得到了以下错误.
“‘package:assertion/src/assertion/box.dart”：断言失败:第1446行pos 12：'hasSize'：RenderBox没有布局: RenderPointerListener#da9fd需要-布局需要-油漆
0 (dart:core-patch/dart:core/errors_patch.dart:37) _AssertionError._doThrowNew
1 (dart:core-patch/dart:core/
浏览 2提问于2018-06-05得票数 0
我是flutter框架的新手，我想使用CustomLists。我的( listviewBuilder：)我想在列中添加一个正文，但是给出了一个空页。如果我只在身体部分使用listView，那么一切都很好。
这是我的Widget：
Widget _buildListView() {
return ListView.builder(itemBuilder: (BuildContext context, int index) {
return Dismissible(
key: Key('ke'),
onDismissed: (Di
浏览 31提问于2019-07-23得票数 0
回答已采纳
1回答
我想要创建的是一个ListView行，如下图所示。该行包含两列。他们每个人都有一个图像。 ? 我已经创建了第一列。图片和代码如下所示。 ? 我的代码： class ProductsRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Tex
浏览 14提问于2021-01-14得票数 0
回答已采纳
2回答
在我的颤振代码中，我试图创建一个布局约束，它可以适用于多个屏幕大小，但在我的两个模拟器(一个是6“，另一个是10”)上，布局要么太小要么太大。为什么？布局包含一列和四行。下面的代码仅显示第一行。我想要第一排的正方形自动填边到另一边。下面的三行是硬编码的，所以忽略它们。把你的答案集中在第一行。
下面是代码：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
v
浏览 2提问于2021-01-18得票数 1
回答已采纳
由于在Flutter中没有实现AdSense的包，所以我决定创建一个本地插件。它非常简单，小部件是一个IFrameElement。我确保在创建插件时指定它只支持web，因为IFrameElement需要import 'dart:html'，但是每当我试图编译/构建移动版本时，它都会失败，因为它试图在dart:html中使用插件。我怎么才能解决这个问题？
插件：
import 'dart:html' as html show window;
import 'dart:html';
import 'dart:ui' as ui;
im
浏览 17提问于2022-09-23得票数 0
回答已采纳
我正在努力显示长文本，这是一个地址的字符串格式。它可以使用一两行或更多行，我已经尝试了每一个解决方案，以充分显示文本，但每次它溢出。我使用了灵活，可扩展和所有的文本属性，如软包装，但它不起作用。我必须在ListTile中展示这个专栏。
showPickedDropoffLocations() {
return Column(
crossAxisAlignment: CrossAxisAlignment
.start, //meant to align elements to the left - seems to be working
mai
浏览 2提问于2021-08-14得票数 1
1回答
我需要构建一个基于日期选择的动态列表视图，并在此基础上调用api来获取数据并相应地填充列表。然后，在列表视图本身的末尾，我有一个向下按钮，我按下这个按钮应该打开一个展开panel.So来做一个列表，我调用函数Widget buildDynamicList(BuildContext上下文)来根据新的数据动态地填充新的列表。我收到这个错误了。
I/flutter ( 3438): The following assertion was thrown during performResize():
I/flutter ( 3438): Vertical viewport was given unbo
浏览 0提问于2019-03-08得票数 0
回答已采纳
我是一个初学者，还在学习颤动，无法添加全选/全选按钮，有人能帮我吗？我有一个项目列表，我想将Select All/Deselect All按钮添加到以下代码中，当单击下面的Select all按钮时，应该可以看到"Selected Button“。 ? 这是我的模型类 class ToyCarListModel{
String toyimages, toyname, toymodel;
bool isSelected;
ToyCarListModel(this.toyimages, this.toyname, this.toymodel, this.isSe
浏览 28提问于2021-08-23得票数 2
回答已采纳
我试图在flutter中对齐位于行小工具中心的文本小工具，我希望它们从相同的位置开始(跨越所附图像中的标记线)。类似于它们如何在相同的位置结束。对如何实现这一点有什么想法吗？下面是我的text列的代码部分
[
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
