Flutter 小部件布局不正确答案

【问题标题】：Flutter widgets are not getting laid out correctlyFlutter 小部件布局不正确
【发布时间】：2021-07-13 09:34:15
【问题描述】：

作为CourseStream Stream Builder 的一部分生成的ListView 小部件布局不正确，如下图所示。我在Debug Console 中看不到任何错误。

下面是CourseStream 的代码，其中包含ListView。

final coursesCollection = FirebaseFirestore.instance.collection('courses').limit(10).where('courseLive', isEqualTo: true);

class CourseStream extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: coursesCollection.snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: CircularProgressIndicator(backgroundColor: kBrandColor),
            );
          }
        }

        final courseListStream = snapshot.data!.docs.map((course) {
          return CourseData.fromDocument(course);
        }).toList();

        List<BadgedCourseCard> courseCards = [];

        for (var course in courseListStream) {
          final courseDocID = course.courseDocID;
          final courseID = course.courseID;
          final courseTitle = course.courseTitle;
          final courseDescription = course.courseDescription;
          final courseSubTitle = course.courseSubTitle;
          final courseBadge = course.courseBadge;
          final courseLevel = course.courseLevel;
          final coursePaid = course.coursePaid;
          final courseImage = course.courseImage;
          final courseBgColor = hexToColor(course.courseBackgroundColor.toString());
          final courseBgColor1 = hexToColor(course.courseBgColor1.toString());
          final courseBgColor2 = hexToColor(course.courseBgColor2.toString());
          final courseFgColor = hexToColor(course.courseFgColor.toString());
          final courseDeliveryFormat = course.courseDeliveryFormat;
          final courseLive = course.courseLive;

          final badgedCourseCard = BadgedCourseCard(
            courseTitle: courseTitle.toString(),
            courseTitleTextColor: courseFgColor,
            cardBackgroundColor: courseBgColor,
            courseImage: courseImage.toString(),
            courseCardTapped: () => print("Course Card Tapped"),
            courseBookmarkTapped: () => print("Course Bookmark Tapped"),
          );

        return ListView(
            physics: BouncingScrollPhysics(),
            scrollDirection: Axis.horizontal,
            children: courseCards,
        );
      },
    );
  }
}

下面是消耗ListView 的代码。

class AppHome extends StatefulWidget {
  @override
  _AppHomeState createState() => _AppHomeState();
}

class _AppHomeState extends State<AppHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        leading: Padding(
          padding: EdgeInsets.only(left: 2.5.w),
          child: IconButton(
            onPressed: () => Navigator.of(context).push(ScaledAnimationPageRoute(AppDrawer())),
            icon: Icon(
              Icons.sort,
              color: Theme.of(context).iconTheme.color,
              size: 6.5.w,
            ),
          ),
        ),
        actions: <Widget>[
          Padding(
            padding: EdgeInsets.only(right: 2.5.w),
            child: IconButton(
              onPressed: null,
              icon: Icon(
                Icons.search,
                color: Theme.of(context).iconTheme.color,
                size: 6.5.w,
              ),
            ),
          ),
        ],
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 5.w),
        child: Column(
          children: [
            CardHeader(
              leadingText: "Courses",
              trailingText: "View All",
            ),
            SizedBox(height: 1.h),
            Expanded(child: CourseStream()),
            SizedBox(height: 2.h),
          ],
        ),
      ),
    );
  }
}

我不确定在Courses 行下方添加空间的确切位置。谁能帮我解决这个问题？提前感谢您的帮助。

【问题讨论】：

您是否尝试在 ListView 中添加此内容？ padding: EdgeInsets.zero
不，我没试过。您是说给ListView 小部件添加填充？
我刚刚尝试将padding: EdgeInsets.zero 添加到ListView，但仍然遇到同样的问题。感谢您的帮助@kmtz
尝试同时添加padding: EdgeInsets.zero 和shrinkWrap:true 看看是否有帮助。
另一种解决方案可能是将ListView 包裹在MediaQuery.removePadding(removeBottom: true, child: ListView() 中

标签： android flutter dart flutter-layout

【解决方案1】：

正如聊天中所讨论的，这可能是一个解决方案。从Column() 中删除Expanded 并用SizedBox 包裹ListView，以便您可以限制高度。

return SizedBox(
       height: 20.5.h,
       child: ListView(
         physics: BouncingScrollPhysics(),
         scrollDirection: Axis.horizontal,
         children: courseCards,
      ),
);

【讨论】：