flutter ListView 分离答案

【问题标题】：flutter ListView Separatedflutter ListView 分离
【发布时间】：2023-02-13 23:08:26
【问题描述】：

我尝试在 Widget 上连续使用 listViewSeparated 并滚动，但它没有显示任何东西，比如它只有一个脚手架（白页）我不知道是什么问题这是我的代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../layout/cubit/cubit.dart';
import '../../layout/cubit/states.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocConsumer<LifeStyleCubit, LifeStates>(
      listener: (context, state) {},
      builder: (context, state) {
        return Scaffold(
          body: Padding(
            padding: const EdgeInsets.all(8.0),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: [
                        ListView.separated(
                          shrinkWrap: true,
                            itemBuilder: (context,index) =>SpecialProgramWidget(),
                            separatorBuilder: (context,index) => SizedBox(width: 20,),
                            itemCount: 3
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  Widget SpecialProgramWidget() => Container(
        width: 310,
        height: 300,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
        ),
        child: Column(
          children: [
            Stack(
              alignment: Alignment.bottomRight,
              children: [
                Container(
                  height: 230,
                  width: 310,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10),
                          topRight: Radius.circular(10)),
                      image: DecorationImage(
                          image: NetworkImage(
                              'https://i.pinimg.com/564x/20/bd/68/20bd68b5a248bb191178bd9b98b53a76.jpg'),
                          fit: BoxFit.cover)),
                ),
                Align(
                  alignment: Alignment.topLeft,
                  child: Container(
                    height: 230,
                    width: 290,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: NetworkImage(
                                'https://www.pngplay.com/wp-content/uploads/6/Fitness-PNG-HD-Quality.png'),
                            fit: BoxFit.cover)),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    'Special Program',
                    style: TextStyle(fontSize: 21, color: Colors.white),
                  ),
                )
              ],
            ),
            Container(
              width: 310,
              height: 70,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(10),
                  bottomRight: Radius.circular(10),
                ),
                border: Border.all(color: Colors.grey.shade400, width: 1),
              ),
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Align(
                        alignment: Alignment.topLeft,
                        child: Text(
                          'Super pump biceps workout',
                          style: TextStyle(
                            fontSize: 15,
                          ),
                        )),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8),
                    child: Align(
                        alignment: Alignment.topLeft,
                        child: Text(
                          '6 Weeks',
                          style: TextStyle(fontSize: 15, color: Colors.grey),
                        )),
                  ),
                ],
              ),
            )
          ],
        ),
      );
}

我尝试了一些解决方案，例如在 ListViewSeparated 上包装 Expanded 小部件，但仍然不起作用我该如何解决这个问题？

【问题讨论】：

问题是关于获得约束和大小。

标签： flutter

【解决方案1】：

问题在 scrollDirection: Axis.horizontal,。此外，您不需要在 SingleChildScrolView 中使用 ListView.separated(，父级已经在处理滚动事件。

您可以提供固定的ListView.separated 来绕过这个问题，

Widget build(BuildContext context) {
  // return
  // BlocConsumer<LifeStyleCubit, LifeStates>(
  //   listener: (context, state) {},
  //   builder: (context, state) {
  return Scaffold(
    body: LayoutBuilder(
      builder: (_, constraints) => Padding(
        padding: const EdgeInsets.all(8.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    SizedBox(
                      width: constraints.maxWidth,
                      child: ListView.separated(
                        shrinkWrap: true,
                        itemBuilder: (context, index) =>
                            SpecialProgramWidget(),
                        separatorBuilder: (context, index) =>
                            SizedBox(width: 20),
                        itemCount: 3,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
    // );
    // },
  );
}

更好的决定是使用 CustomScrolView 我认为这对您想要获得的东西会更好。

【讨论】：