flutter 我正在使用的容器占据了屏幕的整个宽度

vyu0f0g1  于 2023-03-04  发布在  Flutter
关注(0)|答案(2)|浏览(286)

我有一个容器在一个列表视图的建设者,但由于某种原因无论我设置的宽度,它采取的全屏幕宽度.我真的不知道什么是错的现在.这里是代码

Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: _productStream,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text("Loading");
        }

        if (!snapshot.hasData){
          return Container();
        }

        return ListView.builder(
          shrinkWrap: true,
          itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index){
            return Container(
              height:300,
              width: 40,
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(20)
              ),
              child: Column(
                children: [
                  Container(
                    height: 120,
                    width:MediaQuery.of(context).size.width*0.8,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      image: snapshot.data!.docs[index]['itemImage'] != null ?
                      DecorationImage(image: NetworkImage(snapshot.data!.docs[index]['itemImage'])):
                          DecorationImage(image: NetworkImage(snapshot.data!.docs[index]['itemImageList'][1]))
                    ),
                  ),
                ],
              ),
            );
            }
        );
      },
    );
  }
}

外部容器占用屏幕的全部宽度,而子容器没有占用足够的宽度,无论我将宽度设置为什么。也许

ccrfmcuu

ccrfmcuu1#

我认为你可以用一个SizedBox来 Package 你的ListViewBuilder来指定宽度。你也可以添加一个Center Widget来居中你的ListView。

Center(
  child: SizedBox(
    width: 40,
    child: ListView.builder(
      shrinkWrap: true,
      itemCount: snapshot.data!.docs.length,
      itemBuilder: (context, index) {
        return ...
      },
    ),
  ),
),
oxalkeyp

oxalkeyp2#

这是因为ListView占用了屏幕的整个宽度,并且它强制其所有子对象与父对象占用相同的宽度。
一种可能的解决方案是使用SizedBox

SizedBox(
    width: 40,
    child: ListView.builder(
      shrinkWrap: true,
      itemCount: snapshot.data!.docs.length,
      itemBuilder: (context, index) {
        return ...
      },
    ),
  ),

相关问题