Flutter给ListView组件添加按钮后无法滑动

Question

我没添加按钮的时候，是可以滑动的，但是添加按钮后就滑动不了，这是怎么回事，我后端是可以正常获取分页数据的
截图：

这是我的flutter代码

body: ListView.builder(
        physics: AlwaysScrollableScrollPhysics(),
        controller: _scrollController,
        itemCount: _funds.length + (_isLoadingMore ? 1 : 0),
        itemBuilder: (BuildContext context, int index) {
          if (index == _funds.length && _isLoadingMore) {
            return Center(
              child: CircularProgressIndicator(),
            );
          } else if (index == _funds.length) {
            return Container();
          } else {
            return Container(
              padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(_funds[index].name),
                        Text(_funds[index].type),
                      ],
                    ),
                  ),
                  Row(
                    children: [
                      ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          primary: Colors.green, // 按钮背景颜色
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8.0), // 设置按钮圆角
                          ),
                        ),
                        onPressed: () {
                          print("Selected: ${_funds[index].name} - ${_funds[index].type} 打印自选");
                        },
                        child: Text('自选'),
                      ),
                      SizedBox(width: 8.0), // 添加间隔
                      ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          primary: Colors.red, // 按钮背景颜色
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8.0), // 设置按钮圆角
                          ),
                        ),
                        onPressed: () {
                          print("Selected: ${_funds[index].name} - ${_funds[index].type} 打印买入");
                        },
                        child: Text('买入'),
                      ),
                      SizedBox(width: 8.0), // 添加间隔
                      ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          primary: Colors.blue, // 按钮背景颜色
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8.0), // 设置按钮圆角
                          ),
                        ),
                        onPressed: () {
                          print("Selected: ${_funds[index].name} - ${_funds[index].type} 打印打印");
                        },
                        child: Text('打印'),
                      ),
                    ],
                  ),
                ],
              ),
            );
          }
        },
      ),

Answer 1

这个问题出现的原因是，添加了按钮后，ListView 的子组件变得更加宽了，导致 ListView 的宽度变得比较大，从而无法滑动。

解决方案是将 ListView.builder 的宽度限制在父容器的宽度内。你可以在 ListView.builder 的外面包裹一个 SizedBox 或者 Container，设置宽度和高度。例如：

SizedBox(
  width: MediaQuery.of(context).size.width, // 父容器的宽度
  height: MediaQuery.of(context).size.height, // 父容器的高度
  child: ListView.builder(
    physics: AlwaysScrollableScrollPhysics(),
    controller: _scrollController,
    itemCount: _funds.length + (_isLoadingMore ? 1 : 0),
    itemBuilder: (BuildContext context, int index) {
      ...
    },
  ),
),

这样设置之后，ListView.builder 的宽度就会被限制在父容器的宽度内，从而解决了无法滑动的问题。