在颤动中实现底片上的滑块

Question

如何在颤振中实现底页内的滑块。我试过了，但滑块没有移动。但如果我把滑块放在一个新的脚手架上，它就会起作用。帮我。提前致谢。

这是我的代码。

                          new InkWell(
                                onTap: () {
                                  //  fire_ac_on_1();
                                },
                               onDoubleTap:(){
                                  _showModalSheet_ac();

                                }

                                onLongPress: () {
                                  selectTime(context);
                                },
                                child: new IconButton(
                                  icon: new Image.asset('images/ac.png',
                                      color: ac_on_state == true ? Colors
                                          .green : Colors.redAccent),
                                  onPressed: () {
                                    fire_ac_on();
                                  },
                                  iconSize: 80.0,
                                ),
                              ),

// 模态底页 无效_showModalSheet_ac(){

double height = MediaQuery.of(context).size.height;
//print(height);
showModalBottomSheet(context: context, builder: (builder){
  return new Container(
    height: height - 200.0,
      child: new Center(
        child:  new Column(
          children: <Widget>[
            new Container(
             child: new Slider(
              value: slider_value,
           onChanged: onchanged),

          )
            )
          ],
        ),
      )
  );
});

}

onchanged(双值) {

 setState(() {
  slider_value = value;

});
print(slider_value);

}

Answer 1

bottomSheet 不是有状态的，这就是为什么当您在 Slider 中调用 setState 时它不会重建的原因。

您必须使用 StatefulBuilder 包装您的 Slider 小部件。

        StatefulBuilder(
          builder: (context, setState){
            return Slider(
              value: _value,
              onChanged: (selection){
                setState(() {
                  _value = selection;
                });
              },
            );
          },
        ),

Answer 2

我已经使用 StreamBuilder 和 RxDart 解决了同样的问题：

import 'package:rxdart/rxdart.dart';

final _slider = PublishSubject<double>();
Observable<double> get sliderStream => _slider.stream;

void _settingModalBottomSheet(context){
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc){
          return StreamBuilder(
            builder: (BuildContext context, AsyncSnapshot<double> snapshot) {
              return Slider(
                  activeColor: Colors.indigoAccent,
                  min: 0.0,
                  max: 15.0,
                  onChanged: (newRating) {
                    _slider.sink.add(newRating);
                  },
                  value: snapshot.data,
                );
            },
            initialData: 0.0,
            stream: sliderStream,
          );
        }
    );
  }

在每个 onChanged 事件中，您将发出新滑块的值 (_slider.sink.add(newRating);)。 StreamBuilder 将在每次滑块值更改时收到通知，并使用更新后的值 (value: snapshot.data) 重建小部件。

Answer 3

您必须将 BuildContext 传递给 builder 而不是 builder。我希望下面的例子可以帮助你。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Bottom modal tutorial',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Bottom modal tutorial'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  mainBottomSheet(BuildContext context){
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context){
          return Container(
            height: 300.0,
              child: Center(child: new Text("Demo Text"))
          );
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Container(
        child: new Center(
          child: new Text(
            'Body',
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: () => mainBottomSheet(context),
        child: new Icon(Icons.add),
      ),
    );
  }
}