Flutter中Modal内Column垂直滚动条左对齐问题求助

你的问题根源在于垂直Scrollbar被嵌套在水平SingleChildScrollView内部，导致滚动条的位置依赖于水平滚动的内容，无法固定在容器边缘。以下是可行的解决方案：

方案：使用Stack+RawScrollbar固定滚动条位置 #

通过Stack将滚动内容和滚动条分层，让垂直滚动条直接附着在容器左侧，不受滚动内容的位置影响：

Future<void> deleteConfirmationDialog() async {
  var list = []; // Item fetch from Getx controller 
  showDialog(
    context: Get.context!,
    builder: (BuildContext context) {
      return SimpleDialog(
        title: getModalHeader('Confirm delete'),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
        contentPadding: EdgeInsets.all(14),
        titlePadding: EdgeInsets.zero,
        children: [
          Text('You want to delete: '),
          Container(
            width: 280,
            height: 300,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey)
            ),
            child: Stack(
              children: [
                // 二维滚动内容区域
                SingleChildScrollView(
                  controller: _horizontalController,
                  scrollDirection: Axis.horizontal,
                  child: SingleChildScrollView(
                    controller: _verticalController,
                    scrollDirection: Axis.vertical,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: list,
                    ),
                  ),
                ),
                // 垂直滚动条（固定在容器左侧）
                RawScrollbar(
                  controller: _verticalController,
                  thumbVisibility: true,
                  trackVisibility: true,
                  axis: Axis.vertical,
                  thumbColor: Colors.grey,
                  trackColor: Colors.grey.shade200,
                  // 仅响应垂直滚动的通知，避免与水平滚动条冲突
                  notificationPredicate: (notification) => notification.depth == 1,
                  child: const SizedBox.shrink(),
                ),
                // 水平滚动条（固定在容器底部）
                Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: RawScrollbar(
                    controller: _horizontalController,
                    thumbVisibility: true,
                    trackVisibility: true,
                    axis: Axis.horizontal,
                    thumbColor: Colors.grey,
                    trackColor: Colors.grey.shade200,
                    // 仅响应水平滚动的通知
                    notificationPredicate: (notification) => notification.depth == 0,
                    child: const SizedBox.shrink(),
                  ),
                ),
              ],
            ),
          ),
          Text('Are you sure ?'),
          SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              ElevatedButton(
                child: Text('Confirm'),
                onPressed: () {},
              ),
              SizedBox(width: 8),
              ElevatedButton(
                child: Text('Cancel'),
                onPressed: () {},
              ),
            ],
          ),
        ],
      );
    },
  );
}

关键说明 #

• RawScrollbar相比默认Scrollbar提供更精细的位置控制，适合二维滚动场景。
• notificationPredicate用于区分水平/垂直滚动的通知，避免两个滚动条互相干扰。
• 确保list中子项高度超过容器300px时垂直滚动生效，宽度超过280px时水平滚动生效。

内容的提问来源于stack exchange，提问作者mah454