与父容器宽度匹配的卡片：Flutter

Question

我是Flutter的新手，想知道如何将一个宽度设置为与父布局的宽度相匹配。

new Scaffold(
    body: new Container(
  decoration: new BoxDecoration(color: AppColors.hoBlue),
  child: Padding(
    padding: EdgeInsets.all(20.0),
    child: new Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Stack(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: Padding(
                    padding: EdgeInsets.all(20.0),
                    child: Card(
                      child: Padding(
                          padding: EdgeInsets.fromLTRB(20, 0.0, 20.0,20.0),
                          child: Column(
                            children: <Widget>[
                               Card(
                                    elevation: 10.0,
                                    child: Padding(
                                      padding: EdgeInsets.all(20.0),
                                      child:
                                      Text("Sign Up Here"),
                                    ),
                                  ),
                              TextField(
                                decoration: InputDecoration(
                                  labelText: "Email",
                                  hintText: "[e-mail]",
                                ),
                                autofocus: true,
                              ),
                              TextField(
                                decoration: InputDecoration(
                                  labelText: "Password",
                                ),
                                autofocus: true,
                              ),
                              SizedBox(
                                width: double.infinity,
                                // height: double.infinity,
                                child: new RaisedButton(
                                  color: AppColors.hoBlue,
                                  child: Text(
                                    "Sign In",
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontFamily: 'Raleway',
                                      fontSize: 22.0,
                                    ),
                                  ),
                                  onPressed: () => print('Sign In'),
                                ),
                              )
                            ],
                          )),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ],
    )),
  ),
));

上面代码的结果

我需要帮助来创建具有父级的卡片堆，例如我想要的结果

我已经尝试使用stack，但结果是父级卡片重叠在第一张卡片上。

我知道一点关于Expanded标签，但该标签将视图向两个方向扩展，我不知道如何操作。如果您知道，请帮助我。非常感谢。

- Iqbal M

Answer 1

您不需要使用Stack来获取该视图 - 可以使用Column和Material小部件完成。

return Scaffold(
        body: new Container(
      decoration: new BoxDecoration(color: Colors.blue),
      child: new Center(
          child: MergeSemantics(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
              Card(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    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: <Widget>[
                            TextField(
                              decoration: InputDecoration(
                                labelText: "Email",
                                hintText: "[e-mail]",
                              ),
                              autofocus: true,
                            ),
                            TextField(
                              decoration: InputDecoration(
                                labelText: "Password",
                              ),
                              autofocus: true,
                            ),
                            SizedBox(
                              width: double.infinity,
                              // height: double.infinity,
                              child: new RaisedButton(
                                color: Colors.blue,
                                child: Text(
                                  "Sign In",
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontFamily: 'Raleway',
                                    fontSize: 22.0,
                                  ),
                                ),
                                onPressed: () => print('Sign In'),
                              ),
                            )
                          ],
                        )),
                  ],
                ),
              ),
        ],
      ),
            ),
          )),
    ));

输出：

- anmol.majhail

---

返回 Material widget 的链接：https://api.flutter.dev/flutter/material/Material-class.html - startsWith_R

Answer 2

如果您想调整或更改卡片视图，则只需将 Card 放置在 Container 视图内，然后调整您的容器大小即可。此链接将为您提供帮助。

- ABHIMANGAL MS

---

SizedBox 就足够了。 - Stuck

Answer 3

只需将卡放入容器中。

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

- Shailandra Rajput

---

在我的情况下，使用DevTools我发现Card默认有一个1的margin，您可以在Container中使用Card，但如果您希望Card完全填充Container，请将Card的margin设置为：margin: EdgeInsets.zero。 - Ramiro G.M.

最好使用SizedBox而不是容器。 - Praveen Thirumurugan

Answer 4

使用 Material 小部件，它将与卡片相同...并且始终以其父类的完整宽度和高度为准...

- Ankush Mishra