Ошибка стека флаттера? Текст отображается поверх анимированного виджета при наличии сетевого изображения в стеке (дартпад и веб) - PullRequest
Новая
       17

Ошибка стека флаттера? Текст отображается поверх анимированного виджета при наличии сетевого изображения в стеке (дартпад и веб)

1 голос
/ 23 марта 2020

Я создал этот дартпад, чтобы показать, что я вижу. https://dartpad.dev/4bd49a19a9db745f003375e6b0e7689e

Когда в стеке находится сетевое изображение, все текстовые виджеты в стеке отображаются над анимированным виджетом, когда они должны отображаться ниже из-за порядка в стеке , (Я знаю. Неясный, верно?) Однако, когда сетевой образ удален, Стек ведет себя как ожидалось.

В дартпаде у меня есть этот стек: 

Stack(
      children: [
        Positioned(top: 25, child: Column(children: [Text("text below kitty")])),
        Image.network('http://placekitten.com/200/300'), // <-- COMMENT OUT THIS LINE
        Positioned(top: 50, child: Column(children: [Text("text above kitty")])),
        TopDrawer(),
        Positioned(top: 75, child: Column(children: [Text("text above drawer")])),
      ],
    );

Из-за размещения в стеке котенок pi c должен охватывать «текст под котенком» и Topdraw ( ) виджет должен охватывать как «текст ниже, так и текст над котенком», тогда как «текст над ящиком» всегда виден. Однако, когда анимированный виджет запускается нажатием на бургер, «текст над котенком» виден, когда изображение кота не закомментировано ... однако, когда это изображение закомментировано, текст ведет себя правильно.

Кажется, это проблема только с chrome и MacOS ... (и dartpad). Это правильно работало на iOS и Android. Я протестировал это с последним кодом основного канала, 1.16.2-pre.41.

Я считаю, что это ошибка, но перед тем, как отправить ее, я хотел посмотреть, правильно ли я к ней подхожу .

На случай, если дартпад не работает, вот код: 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: Scaffold(body: MyPage()),
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(top: 25, child: Column(children: [Text("text below kitty")])),
        Image.network('http://placekitten.com/200/300'), // <-- COMMENT OUT THIS LINE
        Positioned(top: 50, child: Column(children: [Text("text above kitty")])),
        TopDrawer(),
        Positioned(top: 75, child: Column(children: [Text("text above drawer")])),
      ],
    );
  }
}

class TopDrawer extends StatefulWidget {
  TopDrawer({Key key}) : super(key: key);

  @override
  _TopDrawerState createState() => _TopDrawerState();
}

class _TopDrawerState extends State<TopDrawer>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;
  bool _drawerState;

  @override
  void initState() {
    controller =
        AnimationController(duration: Duration(milliseconds: 200), vsync: this)
          ..addListener(() => setState(() {}));

    animation = Tween(begin: 0.0, end: 200.0).animate(controller);
    _drawerState = false;
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: 0,
          left: -225,
          child: Transform.translate(
            offset: Offset((animation.value * (225 / 200)), 0.0),
            child: Container(
              height: 300,
              width: 225,
              color: Colors.pink,
            ),
          ),
        ),
        Positioned(
          top: 0,
          child: Transform.translate(
            offset: Offset(animation.value, 0.0),
            child: GestureDetector(
              onTap: () {
                setState(
                  () {
                    _drawerState = !_drawerState;
                  },
                );
                _drawerState ? controller.forward() : controller.reverse();
              },
              child: Container(
                height: 25,
                width: 25,
                color: Colors.pink,
                child: Transform.rotate(
                  angle: (animation.value / 200) * 3.14 / 4,
                  child: Icon(Icons.dehaze),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

1 Ответ

0 голосов
/ 23 марта 2020

Похоже, в конце концов, это ошибка, но только для веб-приложений и макросов. Я открыл сообщение об ошибке здесь: https://github.com/flutter/flutter/issues/53078, и они уже приняли его как проблему.

...