簡體   English   中英

Flutter如何使卡片寬度固定?

[英]How to make card width fixed in Flutter?

在我的 Flutter 項目中,我想在卡片中顯示數據列表的每一項。 為此,我在Card中設置了所有組件(例如圖像、文本)。

它看起來像下圖 -

在此處輸入圖像描述

現在,問題是——

我想將卡片寬度固定為固定大小或包裝內容。 由於 Card 小部件沒有height 和 width屬性,那么我應該如何修復這張卡片的寬度。

這是我的代碼-

  Card showCard(int position, int index, AsyncSnapshot<List<ModelFrontList>> snapshot) {
    return new Card(
      elevation: 10.0,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(

          height: 250,

          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[

              Image.network(
                snapshot.data[position].products[index].image,
                height: 150,
                width: 50,
              ),

              SizedBox(
                width: 20.0,
              ),

              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text( snapshot.data[position].products[index].nameEnglish),

                    SizedBox(
                      height: 10.0,
                    ),
                    Text( snapshot.data[position].products[index].nameEnglish),


                  ],
                ),
              ),


            ],
          ),
        ),
      ),
    );
  }

showCard function 在Container中調用。 所以,我需要一個解決方案來修復這張卡的寬度。

解決方案是將卡片包裝在一個大小合適的盒子中。 例如,

Card showCard(int position, int index, AsyncSnapshot<List<ModelFrontList>> snapshot) {
SizedBox(
  width: 200.0,
  height: 300.0,
  child: const Card(
      elevation: 10.0,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(

          height: 250,

          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[

              Image.network(
                snapshot.data[position].products[index].image,
                height: 150,
                width: 50,
              ),

              SizedBox(
                width: 20.0,
              ),

              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text( snapshot.data[position].products[index].nameEnglish),

                    SizedBox(
                      height: 10.0,
                    ),
                    Text( snapshot.data[position].products[index].nameEnglish),


                  ],
                ),
              ),


            ],
          ),
        ),
      ),
    );
  }
)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM