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

【问题标题】：How to Change width of element inside ListView?如何更改 ListView 内元素的宽度？
【发布时间】：2021-06-18 12:11:53
【问题描述】：

我有一个包含一些项目的 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)),
          ),
        ),
      );
    },
  ),

【问题讨论】：

标签： flutter dart

【解决方案1】：

或者，您可以将子小部件包装在容器中并将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)),
                  ),
                ),
              );
            },
          );
        },
      ),

【讨论】：

【解决方案2】：

尝试像这样将其包装在 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)),
          ),
        ),
      )]
     );
    },
  ),

【讨论】：

【解决方案3】：

我从这个link 解决了我的问题：

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

只需在 ListView 中使用 Row

【讨论】：

【解决方案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());
        },
      ),
    ),
  ),
);

}

【讨论】：