如何更改ListView内元素的宽度？

Question

我有一个包含一些项目的ListView，但我的问题是ListView内的项目将扩展到整个屏幕宽度，我尝试使用SizedBox和Container，但它对我不起作用。这是我的代码：

  body: ListView.builder(
    itemCount: 10,
    itemBuilder: (ctx, index) {
      return SizedBox(
        width: 10,
        height: 10,
        child: Card(
          color: btnColor,
          child: Text(
            "Helo",
            // loremIpsum,
            style: TextStyle(color: Colors.black.withOpacity(0.6)),
          ),
        ),
      );
    },
  ),

Answer 1

尝试将其包裹在 Row 中，如下所示：

  body: ListView.builder(
    itemCount: 10,
    itemBuilder: (ctx, index) {
      return Row(
       children:[
         SizedBox(
          width: 10,
          height: 10,
          child: Card(
           color: btnColor,
           child: Text(
            "Helo",
            // loremIpsum,
            style: TextStyle(color: Colors.black.withOpacity(0.6)),
          ),
        ),
      )]
     );
    },
  ),

Answer 2

我通过此链接解决了我的问题：

body: ListView.builder(
        itemCount: 10,
        itemBuilder: (ctx, index) {
          return Row(
            children: [
              Container(height: 50, width: 50, color: Colors.black),
            ],
          );
        },
      ),

只需在ListView中使用Row

Answer 3

或者，您可以将子窗口小部件包装在容器中并将

alignment

设置为

Alignment.centerLeft

 body: ListView.builder(
        itemCount: 10,
        itemBuilder: (ctx, index) {
          return ListView.builder(
            itemCount: 10,
            itemBuilder: (ctx, index) {
              return Container(
                alignment: Alignment.centerLeft,
                child: Card(
                  color: Colors.green,
                  child: Text(
                    "Helo",
                    // loremIpsum,
                    style: TextStyle(color: Colors.black.withOpacity(0.6)),
                  ),
                ),
              );
            },
          );
        },
      ),

Answer 4

小部件构建（BuildContext上下文）{ var screenWidth = MediaQuery.of(context).size.width;

return Scaffold(
  body: SingleChildScrollView(
    child: Container(
      width: screenWidth / 2, //Takes half of the screen size
      child: ListView.builder(
        physics: NeverScrollableScrollPhysics(),
        itemCount: 10,
        itemBuilder: (ctx, index) {
          return Text(index.toString());
        },
      ),
    ),
  ),
);

}

Answer 5

你可以用

FittedBox

在

Align

中制作这个，如下所示：

ListView.builder(
  itemCount: 10,
  itemBuilder: (ctx, index) {
    return Align(
      alignment: Alignment.centerLeft,
      child: FittedBox(
        child: Container(height: 50, width: 50, color: Colors.black),
      ),
    );
  },
)