flutter 为什么CrossAxisAligment在Flex、Row和Column中不起作用？

7qhs6swi 于 2023-04-22 发布在 Flutter

关注(0)|答案(3)|浏览(165)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Flutter Demo'
        ),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            'Hell World!'
          )
        ],
      )
    );
  }
}

为什么文本Hell World只水平居中，而不是垂直居中，因为我也指定了CrossAxisAligment。

是不是因为这个：Issue

flutter

来源：https://stackoverflow.com/questions/54073674/why-crossaxisaligment-not-working-in-flex-row-and-column

3条答案

按热度按时间

gmol16391#

Row不会占用默认情况下所有可用的垂直空间。它只占用所需的空间（但它占用所有的水平空间）。
强制行垂直扩展应该可以做到这一点：

body: SizedBox.expand(
  child: Row(...),
),

赞(0）回复(0）举报 2023-04-22

y53ybaqx2#

使用中心小部件

Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('Hell World!')],))

赞(0）回复(0）举报 2023-04-22

rslzwgfq3#

请确保将小部件Row Package 为另一个父小部件，例如Container或SizedBox或SizedBox.expand，它可以定义其大小，并且可以由子小部件Row用于推断其父小部件的边界大小。

body: SizedBox(
        height: MediaQuery.of(context).size.height,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [Text(‘Hello World’)],
        ),
      ),

注意：如果您使用SizedBox.expand（）时，父控件可能会超过屏幕大小或无限长，则无法正常工作。比如在使用SingleChildScrollView时，使用SizedBox.expand（）无法解决上述问题，则需要分别使用SizedBox/Container和手动定义Column/Rowwidth**/height。

赞(0）回复(0）举报 2023-04-22

我来回答

flutter 为什么CrossAxisAligment在Flex、Row和Column中不起作用？

3条答案

相关问题

热门标签

最新问答