flutter - 如何减少 ListView.separated 项目的宽度？扑

Question

我需要减小 ListView.separated 项目的宽度，将它们放在屏幕的中心，但它们的宽度与屏幕尺寸相同，我该如何更改？

这就是我得到的

这就是我需要的

这是我的代码

Scaffold(           
                  body:
                  ListView.separated(
                  itemCount: 2,
                  itemBuilder: (BuildContext context,int index){
                    return Container(
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Color.fromARGB(100, 141, 166, 255),
                          width: 2
                          
                        ),
                        borderRadius: BorderRadius.circular(10)
                      ),
                      width: 50,
                      height: 80,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text('Test txt', style: TextStyle(fontSize: 40),)
                        ],
                      ),
                    );
                  },
                  separatorBuilder: (BuildContext context, int index){
                    return Container(
                      height: 14,
                    );
                  }
              ),
            );

标签： flutterdart

Answer 1

在 Container 或 Padding Widget 中添加您的 ListView 小部件并设置填充或仅将填充设置为 Listview，如 padding: EdgeInsets.all(16.0)尝试下面的代码希望它对您有所帮助

  Container(
      padding: EdgeInsets.all(16.0),
      child: ListView.separated(
          itemCount: 2,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              decoration: BoxDecoration(
                  border: Border.all(
                      color: Color.fromARGB(100, 141, 166, 255), width: 2),
                  borderRadius: BorderRadius.circular(10)),
              width: 50,
              height: 80,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Test txt',
                    style: TextStyle(fontSize: 40),
                  )
                ],
              ),
            );
          },
          separatorBuilder: (BuildContext context, int index) {
            return Container(
              height: 14,
            );
          }),
    ),

您的结果屏幕->