Flutter实时更新Text数据

Question

我是 Flutter 的新手，一直在寻找答案。

我想制作一个非常简单的时间选择器样式对象，而不需要弹出窗口或其他干扰。所以，因此.....

我有一个 String 对象和一个 Text 小部件来显示 String。 Text 小部件周围有一个垂直拖动手势识别器。当我拖动时，我使用一些计算来调整字符串的值，期望这将通过 Text 小部件显示。这有效，除了一个主要问题。

Text 小部件可能需要 30 秒或更长时间才能更改，因此用户无法使用拖动方法查看他们正在选择的值。

有什么方法可以强制 Text 小部件在更改时显示字符串？

我试过在手势识别器中只包装 Text 小部件，但是触摸区域太小，因此需要其他文本和填充小部件。

child: Padding(
  padding: EdgeInsets.fromLTRB(20,10, 20, 5),
  child: Column(
    children:<Widget>[
      Text("Start of Day",
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
          color: Colors.black,
        ),
      ),
      Text(_startOfDay,
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
          color: Colors.black,
        ),
      ),
    ],
  ),
),
onVerticalDragStart: (DragStartDetails details){
  _offset = 0;
},
onVerticalDragUpdate: (DragUpdateDetails moveDetails){
  _offset = _offset + moveDetails.delta.dy;
  if(_offset > 10||_offset < -10){
    var startparts = _startOfDay.split(":");
    double startHour = double.parse(startparts[0]);
    double startMinute = (double.parse(startparts[1]))/15;
    if(_offset > 10){
      startMinute = startMinute - 1;
      if(startMinute < 0){
        startMinute = 3;
        startHour = startHour - 1;
      }
      if(startHour < 0){
        startHour=0;
        startMinute=0;
      }
      _startOfDay = startHour.toInt().toString().padLeft(2,'0')+ ':' + (startMinute * 15).toInt().toString().padLeft(2,'0');
      _offset = _offset - 10;
      globals.startOfDay=_startOfDay;
    }
    if(_offset < -10){
      startMinute = startMinute + 1;
      if(startMinute > 3){
        startMinute = 0;
        startHour = startHour + 1;
      }
      if(startHour == 24){
        startHour=23;
        startMinute=3;
      }
      _startOfDay = startHour.toInt().toString().padLeft(2,'0')+ ':' + (startMinute * 15).toInt().toString().padLeft(2,'0');
      globals.startOfDay=_startOfDay;
      _offset = _offset + 10;
    }
  }
}

Answer 1

您缺少的是 setState(...)。

当您的属性发生变化时，您需要调用 setState() 以使用属性的新状态重建您的小部件。在这种情况下，您需要在 _startOfDay 更改时调用 setState。

试试这个代码：

child: Padding(
  padding: EdgeInsets.fromLTRB(20,10, 20, 5),
  child: Column(
    children:<Widget>[
      Text("Start of Day",
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
          color: Colors.black,
        ),
      ),
      Text(_startOfDay,
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
          color: Colors.black,
        ),
      ),
    ],
  ),
),
onVerticalDragStart: (DragStartDetails details){
  _offset = 0;
},
onVerticalDragUpdate: (DragUpdateDetails moveDetails){
  _offset = _offset + moveDetails.delta.dy;
  if(_offset > 10||_offset < -10){
    var startparts = _startOfDay.split(":");
    double startHour = double.parse(startparts[0]);
    double startMinute = (double.parse(startparts[1]))/15;
    if(_offset > 10){
      startMinute = startMinute - 1;
      if(startMinute < 0){
        startMinute = 3;
        startHour = startHour - 1;
      }
      if(startHour < 0){
        startHour=0;
        startMinute=0;
      }
      _startOfDay = startHour.toInt().toString().padLeft(2,'0')+ ':' + (startMinute * 15).toInt().toString().padLeft(2,'0');
      setState(() {});
      _offset = _offset - 10;
      globals.startOfDay=_startOfDay;
    }
    if(_offset < -10){
      startMinute = startMinute + 1;
      if(startMinute > 3){
        startMinute = 0;
        startHour = startHour + 1;
      }
      if(startHour == 24){
        startHour=23;
        startMinute=3;
      }
      _startOfDay = startHour.toInt().toString().padLeft(2,'0')+ ':' + (startMinute * 15).toInt().toString().padLeft(2,'0');
      globals.startOfDay=_startOfDay;
      _offset = _offset + 10;
      setState(() {});
    }
  }
}

Flutter实时更新Text数据

Flutter update Text data in real time

real-time

widget

flutter