Question

我想创建一个即将到来的任务类型的UI，其中包含用于任务开始和停止的滑块按钮。这些按钮在水平滑动时渲染滑块动画。我还希望在完成后让任务从列表中消失。

但是，我遇到了一个状态按钮列表的问题，我没有在列表中添加一个按钮，但它仍然显示，而是添加到列表中的按钮消失了。这是我的代码：

import 'dart:core';
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  int state = 0;

  @override
  Widget build(BuildContext context) {
    var redButton = new IconButton(
      icon: new Icon(Icons.send, color: Colors.red),
      onPressed: null
    );
    var blueButton = new IconButton(
      icon: new Icon(Icons.send, color: Colors.blue),
      onPressed: null
    );
    var clicker = new IconButton(
      icon: new Icon(Icons.refresh, color: Colors.green),
      onPressed: () {
        setState(() {
          state = state + 1;
        });
      }
    );

    List<Widget> list = new List();
    list.add(new Text('$state'));
    list.add(clicker);
    if (state < 1) {
      list.add(new _Button(redButton));
    } else {
      print ('Not showing red button');
    }

    print ('Showing blue button');
    list.add(new _Button(blueButton));

    return new MaterialApp(
      title: 'Slide animation',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Center(child: new Text('Flutter stateful widget list bug')),
        ),
        body: new Column(
          children: list,
        ),
      ),
    );
  }
}

// Includes animation and other stuff - stripped for now
class _Button extends StatefulWidget {
  static int counter = 0;
  final Widget button;
  final int id = counter++;
  _SlidableButtonState state;
  _Button(this.button);

  @override
  State createState() {
    state = new _SlidableButtonState(button);
    print ('${id} -> $state');
    return state;
  }
}

class _SlidableButtonState extends State<_Button> {
  final Widget button;
  _SlidableButtonState(this.button);

  @override
  void dispose() {
    super.dispose();
    print ('$this: dispose');
  }

  @override
  Widget build(BuildContext context) {
    // Some rendering stuff will come here
    return button;
  }
}

单击单击按钮时，我希望红色按钮消失，并显示蓝色按钮。但是，红色按钮仍然显示，其蓝色按钮消失。这是显示蓝色按钮被丢弃的日志：

Launching lib/examples/list_bug_flutter.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
Running 'gradlew assembleDebug'...
Built build/app/outputs/apk/debug/app-debug.apk (31.4MB).
Installing build/app/outputs/apk/app.apk...
I/FlutterActivityDelegate(26592): onResume setting current activity to this
I/flutter (26592): Showing blue button
Syncing files to device Android SDK built for x86...
I/flutter (26592): 0 -> _SlidableButtonState#cfe2f(lifecycle state: created, no widget, not mounted)
I/flutter (26592): 1 -> _SlidableButtonState#2d165(lifecycle state: created, no widget, not mounted)
I/flutter (26592): Not showing red button
I/flutter (26592): Showing blue button
I/flutter (26592): _SlidableButtonState#2d165(lifecycle state: defunct): dispose
I/flutter (26592): Not showing red button
I/flutter (26592): Showing blue button

when app starts after clicking

Answer 1

正如您所猜测的，问题是将小部件传递给州。

状态对象可以与不同的小部件一起使用。见https://docs.flutter.io/flutter/widgets/State-class.html

在此期间，父窗口小部件可能会重建并请求此操作树中的位置更新以显示具有相同的新窗口小部件 runtimeType和Widget.key。当发生这种情况时，框架将会更新窗口小部件属性以引用新窗口小部件，然后调用 didUpdateWidget方法，前一个小部件作为参数

您可以通过覆盖didUpdateWidget并添加一些日志来检查这一点。

有状态小部件的错误列表错误 - 我做错了什么

1 个答案: