Flutter中如何让Row内的ListView填充剩余空间

未使用Expanded时的显示效果如下：

需要扩展ListView以占用Row的所有剩余空间，尝试用Expanded包裹ListView但出现错误，当前可正常运行的代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:size_config/size_config.dart';
import 'package:techypanther/core/Styling/AppColors.dart';
import 'package:techypanther/core/Widgets/AppTextWidget.dart';
import 'package:techypanther/features/Homepage/Blocs/home_screen_bloc.dart';
import 'package:techypanther/features/Homepage/Data/Model/AllProductsResponseModel.dart';

class ViewProductsInBag extends StatelessWidget {
  const ViewProductsInBag({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: BlocProvider.of<HomeScreenBloc>(context).itemsInBag,
        builder: (context, AsyncSnapshot<List<Product>> snapshot) {
          if (snapshot.hasData && snapshot.data!.isNotEmpty) {
            return Container(
              color: AppColors.grey,
              padding: EdgeInsets.symmetric(horizontal: 5.w, vertical: 5.h),
              height: 70.h,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  const AppTextWidget(
                    txtTitle: "Items in bag:",
                    fontWeight: FontWeight.w600,
                    txtColor: AppColors.white,
                  ),
                  5.horizontalSpacer,
                     ListView.builder(
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        physics: const ClampingScrollPhysics(),
                        itemBuilder: (context, index) => Padding(
                              padding: EdgeInsets.only(right: 5.w),
                              child: Image.network(
                                snapshot.data![index].image,
                                fit: BoxFit.contain,
                              ),
                            ),
                        itemCount: snapshot.data!.length),
                  Container(
                    width: 40.w,
                    height: double.infinity,
                    color: AppColors.primary,
                    child: Icon(
                      Icons.arrow_forward_ios,
                      color: AppColors.white,
                      size: 30.s,
                    ),
                  )
                ],
              ),
            );
          }
          return const SizedBox.shrink();
        });
  }
}

问题出在两个关键设置上，调整后即可实现需求：

• Row的mainAxisSize属性：原代码中MainAxisSize.min会让Row仅包裹子组件宽度，无法为Expanded提供可扩展空间，需要改为MainAxisSize.max让Row占满可用宽度。
• ListView的shrinkWrap属性：该属性会让ListView根据内容收缩尺寸，与Expanded要求填充剩余空间的逻辑冲突，需移除该属性。

修改后的完整代码：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:size_config/size_config.dart';
import 'package:techypanther/core/Styling/AppColors.dart';
import 'package:techypanther/core/Widgets/AppTextWidget.dart';
import 'package:techypanther/features/Homepage/Blocs/home_screen_bloc.dart';
import 'package:techypanther/features/Homepage/Data/Model/AllProductsResponseModel.dart';

class ViewProductsInBag extends StatelessWidget {
  const ViewProductsInBag({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: BlocProvider.of<HomeScreenBloc>(context).itemsInBag,
        builder: (context, AsyncSnapshot<List<Product>> snapshot) {
          if (snapshot.hasData && snapshot.data!.isNotEmpty) {
            return Container(
              color: AppColors.grey,
              padding: EdgeInsets.symmetric(horizontal: 5.w, vertical: 5.h),
              height: 70.h,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: [
                  const AppTextWidget(
                    txtTitle: "Items in bag:",
                    fontWeight: FontWeight.w600,
                    txtColor: AppColors.white,
                  ),
                  5.horizontalSpacer,
                  Expanded(
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      physics: const ClampingScrollPhysics(),
                      itemBuilder: (context, index) => Padding(
                        padding: EdgeInsets.only(right: 5.w),
                        child: Image.network(
                          snapshot.data![index].image,
                          fit: BoxFit.contain,
                        ),
                      ),
                      itemCount: snapshot.data!.length,
                    ),
                  ),
                  Container(
                    width: 40.w,
                    height: double.infinity,
                    color: AppColors.primary,
                    child: Icon(
                      Icons.arrow_forward_ios,
                      color: AppColors.white,
                      size: 30.s,
                    ),
                  )
                ],
              ),
            );
          }
          return const SizedBox.shrink();
        });
  }
}

调整后，ListView会自动填充Row中除左侧文本、右侧箭头容器之外的所有剩余空间，同时保留横向滚动功能。

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