为什么 CrossAxisAligment 在 Flex、Row 和 Column 中不起作用? [英] Why CrossAxisAligment not Working in Flex,Row and Column?

问题描述

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.

Why the text Hell World only centering horizontally and not vertically as I have also specified CrossAxisAligment.

是不是因为这个:问题

推荐答案

Row 默认情况下不会占用所有可用的垂直空间.它只占用所需的空间(但它占用了所有的水平空间).

Row don't take all the vertical space available by default. It takes only the needed space (but it takes all the horizontal space).

强制行垂直扩展应该可以解决问题:

Forcing the row to expend vertically should do the trick:

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

这篇关于为什么 CrossAxisAligment 在 Flex、Row 和 Column 中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！