Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
456 views
in Technique[技术] by (71.8m points)

flutter - ScrollBar weird behaviour

I'm working on small app for Flutter for web. There is ScrollBar with GridView as a child. Each gridview's child has scrollable area.

When I scrolling GridView everything is OK - the scrollbar works as intended. But If I scroll image inside any grid view item it cause ScrollBar scrolling also. I don't need it, it looks weird.

I think it's not good and maybe even a bug. How to avoid moving scrollbar when I scroll something inside items?

I attached small video. Look at scrollbar behaviour https://imgur.com/a/2CLjN7Z

the code:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(debugShowCheckedModeBanner: false, home: Home()));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(body: Demo());
}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      controller: _scrollController,
      child: GridView.count(
        controller: _scrollController,
        crossAxisCount: 5,
        crossAxisSpacing: 64,
        mainAxisSpacing: 64,
        childAspectRatio: 0.5,
        padding: const EdgeInsets.only(left: 48, right: 48, top: 24, bottom: 48),
        children: List.generate(42, (i) => GridItem(i)),
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

class GridItem extends StatelessWidget {
  GridItem(int i) : super(key: Key('$i'));

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: SizedBox(
        height: 700,
        child: Image.network('https://picsum.photos/id/81/200/300.jpg', fit: BoxFit.fill),
      ),
    );
  }
}

update: I created an issue https://github.com/flutter/flutter/issues/73697 looks like this bug will be fixed in next versions, let's see


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...