代码之家  ›  专栏  ›  技术社区  ›  John Joe Mayank Nema

滚动时堆栈位置不准确

  •  0
  • John Joe Mayank Nema  · 技术社区  · 4 年前

    post .

    为什么当我滚动到底部时,圆点位置显示错误,但当我滚动到顶部时,它工作?

    enter image description here

    代码

    import 'package:flutter/material.dart';
    
    import 'blinking_dot.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
      double posx;
      double posy;
    
      void onTapDown(BuildContext context, TapDownDetails details) {
        final RenderBox box = context.findRenderObject();
        final Offset localOffset = box.globalToLocal(details.globalPosition);
        setState(() {
          posx = localOffset.dx - 7.5;
          posy = localOffset.dy -
              MediaQuery.of(context).padding.top -
              kToolbarHeight -
              7.5;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: SingleChildScrollView(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                  Stack(
                    children: <Widget>[
                      GestureDetector(
                          onTapDown: (TapDownDetails details) =>
                              onTapDown(context, details),
                          child: Container(
                              height: 300,
                              width: 400,
                              child: Image.asset("assets/no_image.png"))),
                      Positioned(
                        child: BlinkingDot(),
                        left: posx,
                        top: posy,
                      )
                    ],
                  ),
                  SizedBox(height: 25),
                  _showTitle(),
                  SizedBox(height: 25),
                  _showTitle(),
                  SizedBox(height: 25),
                  _showTitle(),
                  SizedBox(height: 25),
                  _showTitle(),
                  SizedBox(height: 25),
                  _showTitle(),
                  SizedBox(height: 25),
                  _showTitle(),
                ])));
      }
    
      Widget _showTitle() {
        return TextField(
          style: TextStyle(fontSize: 12.0),
          decoration: InputDecoration(
            border: OutlineInputBorder(
                borderRadius: const BorderRadius.all(
              const Radius.circular(5.0),
            )),
          ),
        );
      }
    }
    

    闪烁点

    import 'package:flutter/material.dart';
    
    class BlinkingDot extends StatefulWidget {
      @override
      _BlinkingDotState createState() => _BlinkingDotState();
    }
    
    class _BlinkingDotState extends State<BlinkingDot>
        with SingleTickerProviderStateMixin {
      AnimationController _animationController;
    
      @override
      void initState() {
        _animationController =
            new AnimationController(vsync: this, duration: Duration(seconds: 1));
        _animationController.repeat();
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return FadeTransition(
            opacity: _animationController,
            child: Container(
                height: 15,
                width: 15,
                child: FloatingActionButton(
                  backgroundColor: Colors.redAccent,
                )));
      }
    
      @override
      void dispose() {
        _animationController.dispose();
        super.dispose();
      }
    }
    
    0 回复  |  直到 4 年前
        1
  •  1
  •   Darish    4 年前

    您用scroll view包装视图,这意味着当您滚动视图时dy值也会改变。

    如何获得相对于滚动位置的准确位置?

    globalPosition localPosition 并从计算表达式中移除额外的填充值。

    干得好。

        box.globalToLocal(details.localPosition);
        setState(() {
          posx = localOffset.dx - 7.5;
          posy = localOffset.dy - 7.5;
        });
      }