Question

嗨，我正在关注构建应用程序的在线教程，但是卡底部出现溢出像素。我找不到视频中的代码与作者未提供的源代码之间的区别。据我了解，我正在 Column（children：[ClipRRect，Row]）<-一般而言，但我看不到它位于ClipRRect后面的行，不应该在下面吗？

  final String imagePath, cityName, monthYear, discount;

  final int oldPrice, newPrice;

  CityCard(this.imagePath, this.cityName, this.monthYear, this.discount,
      this.oldPrice, this.newPrice);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
            child: Stack(
              children: <Widget>[
                Container(
                  height: 210,
                  width: 160,
                  child: Image.asset(
                    imagePath,
                    fit: BoxFit.cover,
                  ),
                ),
                Positioned(
                  left: 0.0,
                  bottom: 0.0,
                  height: 60,
                  width: 160,
                  child: Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.bottomCenter,
                          end: Alignment.topCenter,
                          colors: [
                            Colors.black,
                            Colors.black.withOpacity(0.1)
                          ]),
                    ),
                  ),
                ),
                Positioned(
                  left: 10,
                  bottom: 10,
                  right: 10,
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            cityName,
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                                fontSize: 18),
                          ),
                          Text(
                            monthYear,
                            style: TextStyle(
                                fontWeight: FontWeight.normal,
                                color: Colors.white,
                                fontSize: 14),
                          )
                        ],
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            horizontal: 6.0, vertical: 2.0),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            shape: BoxShape.rectangle,
                            borderRadius:
                                BorderRadius.all(Radius.circular(10))),
                        child: Text(
                          "$discount%",
                          style: TextStyle(fontSize: 14, color: Colors.black),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              SizedBox(width: 5.0),
              Text(
                '${formatCurrency.format(newPrice)}',
                style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(width: 5.0),
              Text(
                "(${formatCurrency.format(oldPrice)})",
                style: TextStyle(
                    color: Colors.grey,
                    fontWeight: FontWeight.normal,
                    fontSize: 13),
              ),
            ],
          ),
        ],
      ),
    );
  }
}```

I am suppose to have a row that shows the new price and the old price below each card. I am able to reveal them if i reduce the height of the Card container but i have no idea why it is overlapping since i am having a Column(children:(ClipRRect,Row)) <- can't see the Row

Answer 1

尝试将Column添加到SingleChildScrollView内

您的讲师可能由于设备的大小而没有发生这种情况。

Answer 2

对于底部的溢出像素，例如，将Column放在SingleChildScrollView中：

Widget build(BuildContext context) {
return Padding(
  padding: const EdgeInsets.symmetric(horizontal: 8.0),
  child: SingleChildScrollView(
   child: Column(
    **your code**)));}

底部溢出17个像素[颤振]

2 个答案: