【问题标题】:How to align card view center in flutter如何在颤动中对齐卡片视图中心
【发布时间】:2023-03-22 18:13:01
【问题描述】:

我已经设计了这个布局。我想将卡片移动到中心(水平和垂直)。卡片的宽度和高度应该是换行内容。

有谁知道如何做到这一点?

class ContactUsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("CONTACT US"),
          backgroundColor: Colors.redAccent,
        ),
        body: Card(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                child: Text("Need Help ?",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                        fontSize: 22)),
              ),
              Container(
                margin: EdgeInsets.only(top: 10),
                child: Text("Max MagiX,",
                    style: TextStyle(
                        fontWeight: FontWeight.normal,
                        color: Colors.black,
                        fontSize: 16)),
              ),
              Container(
                child: Text("San Francisco,",
                    style: TextStyle(
                        fontWeight: FontWeight.normal,
                        color: Colors.black,
                        fontSize: 16)),
              ),
              Container(
                child: Text("CA, USA",
                    style: TextStyle(
                        fontWeight: FontWeight.normal,
                        color: Colors.black,
                        fontSize: 16)),
              ),
              Container(
                margin: EdgeInsets.only(top: 10),
                  child: Row(
                children: <Widget>[
                  Icon(Icons.phone),
                  Container(
                    margin: EdgeInsets.only(left: 2),
                    child: Text("+1 8002 8002 82",
                        style: TextStyle(
                            fontWeight: FontWeight.normal,
                            color: Colors.black,
                            fontSize: 16)),
                  )
                ],
              )),
              Container(
                  margin: EdgeInsets.only(top: 10),
                  child: Row(
                    children: <Widget>[
                      Icon(Icons.email),
                      Container(
                        margin: EdgeInsets.only(left: 2),
                        child: Text("hello@xyz.com",
                            style: TextStyle(
                                fontWeight: FontWeight.normal,
                                color: Colors.black,
                                fontSize: 16)),
                      )
                    ],
                  ))
            ],
          ),
        ));
  }
}

【问题讨论】:

  • 尝试将crossAxisAlignment的参数改成CrossAxisAlignment.center,连同Andrey的回答。

标签: android ios flutter


【解决方案1】:

crossAxisAlignment的参数值改为CrossAxisAlignment.center,然后加上mainAxisAlignment: MainAxisAlignment.centermainAxisSize: MainAxisSize.min

【讨论】:

    【解决方案2】:
    body: Center(child: Card(...
    

    body: Container(alignment: Alignment.center, child: Card(...
    

    使用Container,您可以使用不同类型的alignment

    【讨论】:

    • body: Center(child: Card(... 不工作。我在crossAxisAlignment: CrossAxisAlignment.start,列中有这个@
    猜你喜欢
    • 1970-01-01
    • 2020-09-06
    • 2020-05-24
    • 2020-01-27
    • 1970-01-01
    • 2019-06-26
    • 1970-01-01
    • 1970-01-01
    • 2022-12-06
    相关资源
    最近更新 更多