Question

我正在学习Flutter开发。我想连续显示一些带有短文本的圆角正方形容器。但是，可能的形状是圆形或矩形。因此，我决定设置矩形的宽度和高度，以使它们相等。以下是我用来创建容器的代码

Container(
      width: double.maxFinite,
      height: 
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(keyText),
    ),

当我单独在Box装饰中设置形状时，Container的大小将调整为文本的大小。设置容器的width属性时，我可以在容器之间划分屏幕的可用宽度，这可以确保在屏幕变小或变大时灵活调整大小，而不是对其进行硬编码。现在，我想使高度与宽度原来的大小完全相同，从而获得一个方形容器。知道我该怎么做吗？

编辑：我尝试了以下代码，这是两种情况下容器的外观：

Container(
      alignment: Alignment.center,
      width: double.maxFinite,
      height: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),

Container(
      alignment: Alignment.center,
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),

After using MediaQuery.of(context).size.width for height property or both

Answer 1

这是不使用MediaQuery的解决方案：

AspectRatio(
  aspectRatio: 1,
  child: Container(
    width: double.infinity,
    child: Text(),
  ),
)

Answer 2

Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(keyText),
    ),

Answer 3

使用MediaQuery。 MediaQuery.of(context).size.width为您提供“屏幕宽度大小”值。

Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(keyText),
    )

Answer 4

检查一下我为您制作的快速示例！

git status --ignored

将容器高度设置为等于Flutter中的宽度

4 个答案: