【问题标题】:Flutter Slider in BottomNavigationBar does not updateBottomNavigationBar 中的 Flutter Slider 不更新
【发布时间】:2019-02-02 20:15:38
【问题描述】:

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

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

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

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

它遵循非工作代码。还有一个没有底部导航栏的小部件,滑块按预期工作。

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.

【问题讨论】:

    标签: slider flutter


    【解决方案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'),
              ),
            ],
          ),
        );
      }
    }
    

    我注释了错误的代码。

    【讨论】:

    • 是的,谢谢,你是对的。滑块始终是同一个实例,不会用它的新值“重绘”。 :)
    猜你喜欢
    • 1970-01-01
    • 2020-07-28
    • 2020-11-13
    • 1970-01-01
    • 1970-01-01
    • 2020-07-29
    • 1970-01-01
    • 1970-01-01
    • 2022-11-18
    相关资源
    最近更新 更多