Question

我正在克隆一个名为Baedal Minjok的应用程序。我需要一些帮助...

我想做的是：Original

但我的结果是：MyCopy

如何在Card Widget中设置许多backgroundColor？或任何小工具都具有像第一张图片一样的圆形边缘它会使用很多次，因此它将是可重用的Widget。

好吧，这是我的第一个问题，所以我不确定还有什么需要。

我很尴尬，但这是我的代码

class BrandBox extends StatelessWidget {
  String imgLink, name, explain;
  Color boxColor;

  BrandBox(this.imgLink, this.name, this.explain, this.boxColor);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(5),
      child: Column(
        children: [
          Stack(
            children: [
              Card(
                color: boxColor,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(6.0),
                  //side: BorderSide(color: Colors.red),
                ),
                //브랜드관과 카드 사이 크기
                margin: EdgeInsets.only(top: 30),
                child: Container(
                  width: 195,
                  //color: Colors.deepOrangeAccent,
                  // BHC, 맵부심.. 등의 글씨들이 있는 박스 전체의 패딩
                  padding: EdgeInsets.all(15),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        //카드의 시작부터 첫 Text까지의 거리
                        height: 15,
                        color: boxColor,
                      ),
                      Text(
                        name,
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 15),
                      ),
                      Container(height: 3),
                      Text(
                        explain,
                        style: TextStyle(color: Colors.white, fontSize: 10),
                      ),
                      Container(height: 5),
                      Row(
                        children: [
                          FloatingText("쿠폰", imgLink),
                          FloatingText("신메뉴", imgLink),
                        ],
                      ),
                      Container(
                        color: Colors.white,
                        child: Text("가을이닭! 매일 2천원 할인"),
                      )
                    ],
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.all(10),
                child: new Image.asset(
                  imgLink,
                  width: 50,
                  height: 50,
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

Answer 1

这是编辑后的代码：

null

Answer 2

最好在“卡”中使用“列”：

Card(
          color: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: Column(
            children: [
              Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                    color: Colors.redAccent,
                    borderRadius:
                        BorderRadius.vertical(top: Radius.circular(8.0))),
              ),
              Container(
                width: 200,
                height: 60,
                decoration: BoxDecoration(
                    borderRadius:
                        BorderRadius.vertical(bottom: Radius.circular(8.0))),
              ),
            ],
          ),
        ),

使用“列”将帮助您获得每个部分的动态高度。

如何在Card Widget中设置两种背景颜色？

2 个答案: