Flutter滑块不移动或更新

zte4gxcn  于 2023-06-24  发布在  Flutter
关注(0)|答案(8)|浏览(199)

我正在学习Flutter(和一般的编码),我似乎找不到我最新项目的问题。当我在模拟器中运行时,滑块形式很好,单击拇指和标签显示,但拇指不会在轨道上移动,因此不会调用onChanged事件。

import 'resources.dart';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

class ItemDetail extends StatefulWidget {
  final Item item;

  ItemDetail({Key key, @required this.item}) : super(key: key);

  @override
  _ItemDetailState createState() => new _ItemDetailState(item: item);
}

class _ItemDetailState extends State<ItemDetail> {
  Item item;

  _ItemDetailState({Key key, @required this.item});

  @override
  Widget build(BuildContext context) {
    double margin = ((item.listPrice - item.stdUnitCost)/item.listPrice)*100;
    return new Scaffold(
      appBar: AppBar(
        title: new Text('Item Detail'),
      ),
      body: new Column(
        children: <Widget>[
          new Padding(padding: EdgeInsets.symmetric(vertical: 20.0)),
          new Text(item.itemCode),
          new Text(item.itemDescription),
          new Text(item.itemExtendedDescription),
          new Divider(height: 40.0,),
          new Text('List Price: \$${item.listPrice}'),
          new Text('Cost: \$${item.stdUnitCost}'),
          item.itemType=='N'
              ? new Text('Non-Stock (${item.itemType})')
              : new Text('Stock Item (${item.itemType})'),
          new Text('Available: ${item.stockAvailable}'),
          new Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),
          new Slider(
            value: margin,
            divisions: 20,
            min: 0.0,
            max: 100.0,
            label: margin.round().toString(),
            onChanged: (double value) {
              setState(() {
                margin = value;
              });
            },
          )
        ],
      ),
    );
  }
}
vql8enpb

vql8enpb1#

    • 问题:上例中margin不是状态变量**。它是build方法内部的局部变量。
    • 修复:将此作为示例**变量移动。
    • 原因:Widget只有在状态发生变化时才会进行重建**。
    • 代码:**
class _ItemDetailState extends State<ItemDetail> {
  Item item;
  var margin;

  _ItemDetailState({Key key, @required this.item}) {
    this.margin = ((item.listPrice - item.stdUnitCost)/item.listPrice)*100;
  }

  @override
  Widget build(BuildContext context) {
    //same as now
  }
}
kulphzqa

kulphzqa2#

对于其他人来这里,我有一个稍微不同的原因,滑块没有更新。我把value设为常数。确保该值是一个变量。
这是:

Slider(
  value: _myValue,
  ...
  onChanged: (newValue) => {
    setState(() => _myValue = newValue)
  },
),

不是这个:

Slider(
  value: 0, //                     <-- problem
  ...
  onChanged: (newValue) => {
    setState(() => _myValue = newValue)
  },
),
balp4ylt

balp4ylt3#

当我将变量放入构建函数时,我遇到了这个问题😩

@override
Widget build(BuildContext context) {

int brightness = 85;

return Scaffold(
...

将变量移到函数之外并得到了解😎

int brightness = 85;

@override
Widget build(BuildContext context) {

return Scaffold(
...

因为每次状态更改时,都会调用此构建方法并将变量设置回指定的值😝

i86rm4rw

i86rm4rw4#

这可能会有帮助!(我使用Statefulbuilder更新了值

double _value = 20;

               StatefulBuilder(
                  builder: (context, state) => Center(
                    child: CupertinoSlider(
                      value: _value,
                      min: 0.0,
                      max: 100.0,
                      onChanged: (val) {
                        state(() {
                          _value = val;
                        });
                      },
                    ),
                  ),
                )
lsmd5eda

lsmd5eda5#

我认为变量margin不具有UI构建的范围。调试时,可以看到变量中的更改,但不呈现。我尝试了以下方法,并能够更新UI值。

class _MyHomePageState extends State<MyHomePage> {

     double margin=0;

     Widget getSlider(BuildContext context)
      {

        return Slider(
      value:margin.toDouble(),
      onChanged: (newRating){

        setState(() {
          margin = newRating;
        });

      },
      min: 0,
      max: 100,
      divisions: 5,
    );
   } // getslider method closed
     // @0verride Widget build method
    // under children widgets , simply call the getSlider method to place the slider
 } //class
yks3o0rb

yks3o0rb6#

我在给Slider(value: tasksDetails.taskImportance.toDouble(), etc)时遇到了问题
我用Slider((_currentImportance ?? tasksDetails.taskImportance).toDouble(), etc)
然后可以移动滑块。我不知道为什么这现在起作用。只能猜测与Denish的原因有关,原因:只有当它的状态发生变化时,小部件才会得到重建。所选滑块值在两种情况下均正确保存。

unguejic

unguejic7#

我的第一个问题是Dinesh回答的。然后滑块不光滑。我只能轻轻敲一下让它动起来。我在iOS上,所以我将Slider小部件更改为Slider.adaptive。这将滑块更改为CupertinoSlider
复制和粘贴类,方便您的测试:

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  double _currentSliderValue = 20;

  @override
  Widget build(BuildContext context) {
    return Slider.adaptive(
      value: _currentSliderValue,
      max: 100,
      divisions: 5,
      label: _currentSliderValue.round().toString(),
      onChanged: (double value) {
        setState(() {
          _currentSliderValue = value;
        });
      },
    );
  }
}
k2arahey

k2arahey8#

在我的例子中,问题是构建树在FutureBuilder中,滑块更新会在异步调用时卡住。将滑块移动到FutureBuilder小部件下的小部件解决了这个问题。

相关问题