Card宽度与父容器相匹配：flutter

Question

13 浏览2023年4月5日

匿名的 2023年4月5日

0 Comments

我是Flutter的新手，所以我想知道如何设置一个与父布局宽度相匹配的宽度。\n我需要帮助使卡片叠在父卡片上，类似于期望的结果。我已经尝试使用stack，但结果是父卡片重叠在第一张卡片上。\n我知道一点关于Expanded标签，但Expanded会在两个方向上扩展视图，我不知道该怎么做。如果你知道，请帮助我，谢谢。

0

3 答案

匿名的 · Answer 1 · 2023-05-05T16:54:40+00:00

在上述代码中，我们将一个Card放置在一个Container中。然而，在运行时，我们发现Card并没有完全填充Container。通过使用DevTools，我们发现Card默认具有1的margin。要使Card完全填充Container，我们需要将Card的margin设置为EdgeInsets.zero。

解决方法是使用SizedBox代替Container。SizedBox是一个具有固定大小的组件，它可以用来包裹Card，并且不会有任何默认的margin。以下是使用SizedBox解决问题的代码示例：

Padding(


  padding: EdgeInsets.all(20),
  child: SizedBox(
    height: 50,
    width: double.infinity,
    child: Card(
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text("Edit Profile"),
      ),
    ),
  ),

)

通过使用SizedBox，我们可以确保Card完全填充Container，而不需要手动调整margin。这样，我们可以在Flutter中实现Card的宽度与父容器相匹配的效果。

匿名的 · Answer 2 · 2023-09-11T14:45:28+00:00

要使卡片视图的宽度与父容器相匹配，可以将Card放置在Container内，并调整容器的大小。根据https://stackoverflow.com/a/50017126/7418129中的解决方法，可以使用以下代码实现：


Container(
  width: double.infinity,
  child: Card(
    // 卡片内容
  ),
)

使用SizedBox也足够实现此目的。具体代码如下：


SizedBox(
  width: double.infinity,
  child: Card(
    // 卡片内容
  ),
)

匿名的 · Answer 3 · 2023-07-25T23:26:41+00:00

这个问题是因为Card组件的宽度没有与父组件匹配造成的。解决方法是将Card组件的宽度设置为和父组件一致。

具体操作如下：

将Card组件的宽度设置为double.infinity，即SizedBox的宽度属性设置为double.infinity。

代码如下：

Card(


  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Material(
        elevation: 24.0,
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Text("Sign Up Here"),
        ),
      ),
      Padding(
        padding: EdgeInsets.fromLTRB(20, 10.0, 20.0, 20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextField(
              decoration: InputDecoration(
                labelText: "Email",
                hintText: "example.com",
              ),
              autofocus: true,
            ),
            TextField(
              decoration: InputDecoration(
                labelText: "Password",
              ),
              autofocus: true,
            ),
            SizedBox(
              width: double.infinity,
              child: RaisedButton(
                color: Colors.blue,
                child: Text(
                  "Sign In",
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Raleway',
                    fontSize: 22.0,
                  ),
                ),
                onPressed: () => print('Sign In'),
              ),
            )
          ],
        ),
      ),
    ],
  ),
),

这样就可以实现Card组件的宽度与父组件一致，解决了这个问题。

参考链接：[Material widget](https://api.flutter.dev/flutter/material/Material-class.html)