slider - BottomNavigationBar 中的 Flutter Slider 不更新

Question

使用 flutter 。我在 BottomNavigationBar-Widget 的子项中创建了一个 Slider Widget。定义了它的 onChanged 函数，它应该改变 Slider 的值。

如果我将 Slider 放在一个简单的 Scaffold Widget 中，它就可以正常工作。

我如何在 BottomNavigationBar 中进行这项工作？ 我必须在 BottomNavigationBar-Widget 中声明是否缺少任何内容(监听器/回调或其他内容)？

我在 Android Studio 3.1.4 中使用 Flutter 稳定版。

它遵循非工作代码。还有一个没有 BottomNavigationBar 的小部件，其中 slider 按预期工作。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Issue Slider in BottomNavigationBar',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SliderInNavigationBar(),
      // home: new MyHomePage(),
    );
  }
}

class SliderInNavigationBar extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _SliderInNavigationBarScreenState();
  }
}

class _SliderInNavigationBarScreenState extends State<SliderInNavigationBar> {
  int _currentIndex = 0;
  List<Widget> _children;
  int _period = 0;

  @override
  void initState() {
    super.initState();

    _children = [
      new Slider(
          value: _period.toDouble(),
          min: 0.0,
          max: 100.0,
          onChanged: (double value) {
            print('OnChanged');
            setState(() {
              _period = value.round();
            });
          }),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Slider in BottomNavigationBar'),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.timelapse),
            title: Text('Page 1'),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text('Page 2'),
          ),
        ],
      ),
    );
  }
}

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

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _period = 0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Slider in AppBar"),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Slider(
                value: _period.toDouble(),
                min: 0.0,
                max: 100.0,
                onChanged: (double value) {
                  print('OnChanged');
                  setState(() {
                    _period = value.round();
                  });
                }),
          ],
        ),
      ),
    );
  }
}

简短的 Flutter 医生输出:

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v0.5.1, on Microsoft Windows [Version 10.0.17134.228], locale de-DE)
[√] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[√] Android Studio (version 2.3)
[√] Android Studio (version 3.1)
[!] VS Code, 64-bit edition (version 1.24.1)
[√] Connected devices (1 available)

! Doctor found issues in 1 category.

Answer 1

下午好

您必须直接在主体中声明 Slider，而不是在 initState() 中实例化的 List。

下面的代码应该可以工作:)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Issue Slider in BottomNavigationBar',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SliderInNavigationBar(),
      // home: new MyHomePage(),
    );
  }
}

class SliderInNavigationBar extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _SliderInNavigationBarScreenState();
  }
}

class _SliderInNavigationBarScreenState extends State<SliderInNavigationBar> {
  int _currentIndex = 0;
  //List<Widget> _children;
  int _period = 0;

  @override
  void initState() {
    super.initState();

    /**
    _children = [
      new Slider(
          value: _period.toDouble(),
          min: 0.0,
          max: 100.0,
          onChanged: (double value) {
            print('OnChanged');
            setState(() {
              _period = value.round();
            });
          }),
    ];**/
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Slider in BottomNavigationBar'),
      ),
      body: new Slider(
          value: _period.toDouble(),
          min: 0.0,
          max: 100.0,
          onChanged: (double value) {
            print('OnChanged');
            setState(() {
              _period = value.round();
            });
          }),
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.timelapse),
            title: Text('Page 1'),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text('Page 2'),
          ),
        ],
      ),
    );
  }
}

我注释了错误的代码。