簡體   English   中英

如何在 flutter 的列表視圖中設置卡片的寬度?

[英]How Can I set width of a card in list view in flutter?

我有一個卡片列表,但是當我更改卡片的寬度時,它仍然采用與父容器相同的寬度。 我試過用大小合適的盒子或容器來包裝列表視圖、卡片,甚至滾動視圖,但對我來說沒有任何效果。

  Container(
              height: MediaQuery.of(context).size.height * 0.6,
              width: MediaQuery.of(context).size.width * 0.8,
              decoration: BoxDecoration(
                color: kWhiteColor,
                borderRadius: BorderRadius.all(
                    Radius.circular(MediaQuery.of(context).size.height * 0.02)),
              ),
              child: Padding(
                padding:
                    EdgeInsets.all(MediaQuery.of(context).size.height * 0.015),
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  child: ListView.builder(
                    physics: const NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: 10,
                    itemBuilder: (BuildContext context, int index) {
                      return SizedBox(
                        width: MediaQuery.of(context).size.width*0.001,
                        height: MediaQuery.of(context).size.height*0.3,
                        child: Card(
                          color: Colors.black,
                        ),
                      );
                    },
                  ),
                ),
              ),
            ),

我面臨的問題

White Card behind 是父容器,或者我們可以說是最外層的容器。

將您的孩子包裝在Align小部件中

return Align(
  alignment: Alignment.centerRight, //or choose another Alignment
  child: SizedBox(
    width: MediaQuery.of(context).size.width*0.001, //you sure it should be 0.001?
    height: MediaQuery.of(context).size.height*0.3,
    child: Card(
      color: Colors.black,
    ),
  ),
);

可以這樣做

          itemBuilder: (BuildContext context, int index) {
            return Align( // wrap card with Align
              child: SizedBox(
                width: MediaQuery.of(context).size.width * 0.1,
                child: Card(

暫無
暫無

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

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