SingleChildScrollView 不适用于网页，仅适用于移动设备

Question

我正在尝试使用 SingleChildScrollView 在 Flutter 中创建一个水平滚动列表，但是，仅适用于移动设备，我尝试了其他解决方案，但没有任何效果。我是巴西人，代码的某些部分是葡萄牙语的。

该小部件在另一个滚动视图中呈现，它的工作方式类似于网络中的 Netflix 电影列表......

这是代码：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:t2_market/src/Controllers/ConfiguracaoController.dart';
import 'package:t2_market/src/Controllers/GrupoMarcaController.dart';
import 'package:t2_market/src/Model/Configuracao/Configuracao.dart';
import 'package:t2_market/src/Templates/Components/LoaderShimmers.dart';
import 'package:t2_market/src/Templates/Mobile/Categories/BrandGroupList.dart';
import 'package:t2_market/src/Templates/Mobile/Categories/CategoriesListWeb.dart';
import 'package:t2_market/src/core/AppTextStyles.dart';
import 'dart:async';

StreamController<String> streamController =
    StreamController<String>.broadcast();

class Categories extends StatefulWidget {
  Categories(this.stream);
  final Stream<String> stream;
  @override
  _CategoriesState createState() => _CategoriesState();
}

class _CategoriesState extends State<Categories> {
  Configuracao? conf;
  List<dynamic> data = [];
  List<dynamic> marcas = [];
  List<dynamic> grupos = [];
  var icon = Icons.ac_unit;
  late String? type;
  String? memo;
  bool loading = true;

  void _getData() async {
    setState(() {
      loading = true;
    });
    await ConfiguracaoController.fetchConfiguracao().then((value) {
      setState(() {
        conf = value;
      });
    });

    type = conf!.tipoMenuHome;
    grupos = await GrupoMarcaController.fetchGrupo();
    marcas = await GrupoMarcaController.fetchMarca();

    if (type == 'M') {
      setState(() {
        data = marcas;
        loading = false;
      });
    } else {
      setState(() {
        data = grupos;
        loading = false;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    loading = true;
    _getData();
    widget.stream.listen((index) {
      memo = index;
      if (index == 'M') {
        setState(() {
          data = marcas;
        });
      } else {
        setState(() {
          data = grupos;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return data.isEmpty && !loading
        ? Center(
            child: Icon(Icons.warning),
          )
        : SingleChildScrollView(
          
            scrollDirection: Axis.horizontal,
            child: Container(
                margin: EdgeInsets.only(top: 20.0),
                height: 100.0,
                child: Row(
                  children: [
                    Align(
                        alignment: Alignment.topCenter,
                        child: ListView.builder(
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            physics: BouncingScrollPhysics(),
                            itemCount: loading == true ? 20 : data.length,
                            itemBuilder: (context, index) {
                              return loading == true
                                  ? Container(
                                      height: 100,
                                      width: 100,
                                      margin:
                                          EdgeInsets.only(left: 5, right: 5),
                                      child: LoaderShimmers())
                                  : clickable(context, index, data[index]);
                            })),
                    Container(width: 10),
                  ],
                )));
  }

  Container clickable(BuildContext context, int index, dynamic data) {
    return Container(
        margin: EdgeInsets.only(left: 5, right: 5),
        width: 100.0,
        child: Material(
            child: Ink(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: AppStyles.darkBlue,
                ),
                child: InkWell(
                    onTap: () {
                      kIsWeb
                          ? Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => CategoriesListWeb(data)))
                          : Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => BrandGroupList(data)));
                    },
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                              padding: EdgeInsets.only(left: 10, right: 10),
                              child: Text(data.nome,
                                  maxLines: 3,
                                  textAlign: TextAlign.center,
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold)))
                        ])))));
  }
}

Answer 1

我不知道这是否适用于你的情况，但我有一个类似的问题并且它解决了它（Scroll 在 andorid 模拟器中工作，而不是在 Chrome 中）。在main.dart之后

return MaterialApp.router(

添加

scrollBehavior: MyCustomScrollBehavior(),

所以看起来像这样

@override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      scrollBehavior: MyCustomScrollBehavior(),

并在页面末尾添加

class MyCustomScrollBehavior extends MaterialScrollBehavior {
 // Override behavior methods and getters like dragDevices
 @override
 Set<PointerDeviceKind> get dragDevices => {
   PointerDeviceKind.touch,
   PointerDeviceKind.mouse,
   // etc.
 };
}