Flutter 卡片和容器设计

Posted 2023-02-23

【中文标题】Flutter 卡片和容器设计

【英文标题】：Flutter Card and Container design

【发布时间】：2021-09-13 11:41:26

【问题描述】：

我想实现这个：

但我最终得到了这个（忽略颜色）：

如何塑造彩色边框边的边框，我一直收到这个奇怪的错误（或者至少我从来没有遇到过），我塑造了 topLeft 和 bottomLeft 边框并弹出A borderRadius can only be given for a uniform Border.我在做什么这里错了吗？我在Card 小部件中放置了一个Container，我尝试了相反的方法，但不是我预期的结果。我现在有了我需要的东西，我只需要围绕容器的左上角和左下角（或者其他东西）来实现第一张蓝色图片的目标。

代码如下：

Container(
                      height: 98.0,
                      width: double.infinity,
                      child: Card(
                        elevation: 4,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(4.0),
                        ),
                        shadowColor: Color.fromRGBO(0, 0, 0, 0.6),
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10), //this is causing the error, when I remove it, I get the card like on picture 2 with the red line
                            border: Border(
                              left: BorderSide(
                                  color: Colors.red,
                                  width: 3.0,
                                  style: BorderStyle.solid),
                            ),
                          ),
                          child: Row(
                           // some content here
                            ],
                          ),
                        ),
                      ),
                    ),

提前感谢您的帮助！

【参考方案1】：

请试试这个

Padding(
        padding: const EdgeInsets.all(8.0),
        child: Card(
          color: Colors.green,
          elevation: 16,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          child: Wrap(
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(10),
                        topRight: Radius.circular(10))),
                margin: EdgeInsets.only(left: 10),
                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "Dr. Alok Verma",
                      style: TextStyle(fontSize: 24),
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                            child: Text("Date: 14-06-2021",
                                style: TextStyle(fontSize: 24))),
                        Expanded(
                            child: FlatButton(
                                onPressed: () ,
                                child: Container(
                                    decoration: BoxDecoration(
                                        color: Colors.green,
                                        borderRadius: BorderRadius.circular(5)),
                                    padding: EdgeInsets.all(8),
                                    child: Text("Completed",
                                        style: TextStyle(fontSize: 24)))))
                      ],
                    ),
                    Text("Time: 10:20", style: TextStyle(fontSize: 24)),
                    SizedBox(
                      height: 20,
                    ),
                    Text("Aastha Hospital",
                        style: TextStyle(
                            fontSize: 24, fontWeight: FontWeight.bold)),
                    Text("Some address", style: TextStyle(fontSize: 18)),
                  ],
                ),
              )
            ],
          ),
        ),
      )

图片：