Question

使用Flutter。我在BottomNavigationBar-Widget的子级中创建一个Slider Widget。定义了其onChanged函数，该函数应更改Slider的值。

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

如何在BottomNavigationBar中使其工作？我必须在BottomNavigationBar-Widget中声明任何缺少的内容（侦听器/回调或其他东西）吗？

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

它遵循无效代码。还有一个没有BottomNavigationBar的小部件，滑块可以按预期工作。

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 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'),
          ),
        ],
      ),
    );
  }
}

我评论了错误的代码。

BottomNavigationBar中的Flutter Slider无法更新

1 个答案: