【问题标题】:How Can I set width of a card in list view in flutter?如何在颤动的列表视图中设置卡片的宽度?
【发布时间】:2020-10-09 19:26:12
【问题描述】:

我有一个卡片列表,但是当我更改卡片的宽度时,它仍然采用与父容器相同的宽度。我试过用大小合适的盒子或容器来包装 listview、card 甚至是 scrollView,但对我来说没有任何效果。

  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 后面是父容器,或者我们可以说是最外面的容器。

【问题讨论】:

    标签: flutter listview dart resize card


    【解决方案1】:

    将您的孩子包裹在 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,
        ),
      ),
    );
    

    【讨论】:

    • 0.001 仅用于测试目的
    【解决方案2】:

    可以这样做

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-10-18
      • 2019-06-26
      • 1970-01-01
      • 1970-01-01
      • 2021-04-26
      • 2022-06-12
      • 2020-04-17
      • 2020-05-24
      相关资源
      最近更新 更多