1

在此处输入图像描述> 一切正常，但当我更改产品名称时，它的底部像素溢出 :(;

class VerticalProductItemWidget extends StatelessWidget {
final ProductModel product;

const VerticalProductItemWidget({Key key, this.product}) : 
super(key: key);

@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
  return GestureDetector(

这里我的卡片从一些装饰开始即使我改变图片大小，它也会被一些像素溢出。孩子：填充（填充：const EdgeInsets.all（8.0），

    child: Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20.0),
      ),
      color: Color(0xFFFCFCFC),
      child: Container(
        // padding: const EdgeInsets.all(10),
        // color: productt.backgroundColor,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Padding(
                padding: const EdgeInsets.only(top: 10.0),
                child: Hero(
                    tag: product.imagepath.toString(),
                    child: FadeInImage.assetNetwork(
                      placeholder: 
   'assets/images/image_placeholder.png',
                      image: product.imagepath.toString(),
                      height: 100,
                    ))),
            Text(
              product.productname,
              style: TextStyle(
                  fontWeight: FontWeight.w400,
                  color: Color(0xFF3B3B43),
                  fontSize: 16),
            ),
            Divider(
              height: 4,
              indent: 10,
              endIndent: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Rs: ',
                  style: TextStyle(
                      fontWeight: FontWeight.w400,
                      color: Color(0xFF050405),
                      fontSize: 14),
                ),
                Text(
                  product.saleprice.toString(),
                  style: TextStyle(
                      fontWeight: FontWeight.w400,
                      color: Color(0xFF3B3B43),
                      fontSize: 14),
                ),
                Text(
                  '.00',
                  style: TextStyle(
                      fontWeight: FontWeight.w400,
                      color: Color(0x703B3B43),
                      fontSize: 8),
                ),
              ],
            ),
          ],
        ),
      ),
      elevation: 5,
    ),
  ),
[![enter image description here][1]][1] );
 }
}

最终结果在这里作为屏幕图像。有没有人遇到同样的问题，求解答

4

5 回答 5

0

也许尝试用 SingleChildScrollView 包装 Column 小部件。

于 2021-02-11T22:01:15.387 回答
0

尝试用 Container 包装您的 Text 小部件（带有您的产品名称）。也许这会奏效

于 2021-02-11T22:13:05.357 回答
0

您还可以使用堆栈小部件替换列并将图像包装在容器中。

于 2021-02-12T04:29:19.583 回答
0

扩展（子：文本（“product.saleprice.toString（）”，样式：TextStyle（字体重量：FontWeight.w400，颜色：颜色（0xFF3B3B43），字体大小：14）），）

于 2021-02-12T04:34:57.313 回答
0 
Widget getData(image1,image2,n1,n2,rat1,rat2,p1,p2){
return Expanded(
child: Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      SizedBox(width: 15,),
      Expanded(
        child: Container(
          margin: EdgeInsets.only(top: 20),
          child: Stack(
            children: [
              Container(
                height: 200,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  image: DecorationImage(
                      image: AssetImage(image1),
                      fit: BoxFit.cover
                  ),
                ),
                alignment: Alignment.bottomCenter,
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(20),
                        bottomRight: Radius.circular(20)),
                    color: Colors.black.withOpacity(0.4),
                  ),
                  height: 40,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        margin: EdgeInsets.only(
                          left: 5,
                          right: 5,
                        ),
                        child: Text(
                          '$n1',style: TextStyle(color: Colors.white,letterSpacing: 1),
                        ),),
                      Text('$p1',style: TextStyle(color: Colors.white,letterSpacing: 1),),
                    ],
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.only(left: 10),
                height: 25,
                width: 60,
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      bottomRight: Radius.circular(4)),
                ),
                child: Center(
                  child: Row(
                    children: [
                      Text('$rat1',style: TextStyle(color: Colors.white),),
                      Icon(Icons.star,color: Colors.white,),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
        flex: 1,
      ),
      SizedBox(width: 15,),
      Expanded(
        child: Container(
          margin: EdgeInsets.only(top: 20),
          child: Stack(
            children: [
              Container(
                height: 200,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  image: DecorationImage(
                      image: AssetImage(image2),
                      fit: BoxFit.cover
                  ),
                ),
                alignment: Alignment.bottomCenter,
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(20),
                        bottomRight: Radius.circular(20)),
                    color: Colors.black.withOpacity(0.4),
                  ),
                  height: 40,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        margin: EdgeInsets.only(
                          left: 5,
                          right: 5,
                        ),
                        child: Text(
                          '$n2',style: TextStyle(color: Colors.white,letterSpacing: 1),
                        ),),
                      Text('$p2',style: TextStyle(color: Colors.white,letterSpacing: 1),),
                    ],
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.only(left: 10),
                height: 25,
                width: 60,
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      bottomRight: Radius.circular(4)),
                ),
                child: Center(
                  child: Row(
                    children: [
                      Text('$rat2',style: TextStyle(color: Colors.white),),
                      Icon(Icons.star,color: Colors.white,),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
        flex: 1,
      ),
      SizedBox(width: 15,),

    ],
  ),
),
flex: 1,
);
}
void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white,
  systemNavigationBarColor: Colors.white,
  //statusBarBrightness: Brightness.light,
  statusBarIconBrightness: Brightness.dark,
  systemNavigationBarIconBrightness: Brightness.dark,
));
[![Fashion Image][1]][1]  
runApp(
MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text(
        'SHOPPING GALLERY UI',
        style:
            TextStyle(letterSpacing: 2, color: Colors.black, fontSize: 20),
      ),
      centerTitle: true,
      backgroundColor: Colors.white,
      brightness: Brightness.light,

    ),
    body: SingleChildScrollView(
      child: Container(
        height: 1200,
        child: Stack(
          children: [
            Container(
              width: double.infinity,
              height: double.infinity,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Color(0xff357cea),
                    Color(0xff4c53ea),
                    Color(0xff9c2bdd),
                    Color(0xffca02e5),
                  ],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 20),
              child: Column(
                children: [

                  getData('assets/images/shoes.png','assets/images/tshirt.jpg','SHOES','TSHIRT','5.0','4.1','\$30.33  ','\$52.00  '),
                  getData('assets/images/gtop.jpg','assets/images/blazer.jpg','TOP','BLAZER','4.9','4.2','\$40.00  ','\$99.99  '),
                  getData('assets/images/hoodie.jpg','assets/images/jeans.jpg','HODIE','JEANS','4.7','4.5','\$70.00  ','\$72.30  '),
                  getData('assets/images/combo.jpg','assets/images/jacket.jpg','COMBO','JACKET','4.8','4.8','\$56.27  ','\$60.90  '),
                  getData('assets/images/shrug.jpg','assets/images/hot.jpg','SHRUG','HOT WEAR','4.2','4.1','\$90.99  ','\$54.90  '),
                  getData('assets/images/watch.jpg','assets/images/shirt.jpg','WATCH','SHIRT','4.3','4.0','\$99.99  ','\$25.33  '),

                ],
              ),
            ),
          ],
        ),
      ),
    ),
  ),
      debugShowCheckedModeBanner: false,
),
);
于 2021-02-12T04:46:05.767 回答