注册登录

Flutter根据用户输入改变控件 

之前使用的都是无状态控件，无状态控件从父控件接收参数，以final成员变量存储。当一个控件被build时，它使用这些存储的值作为创建控件的参数。为了构建更友好的体验，比如以更有趣的方式对用户的输入做出响应，应用程序通常会有一些状态。Flutter使用StatefulWidgets实现这个想法。StatefulWidgets能够生成有状态对象的控件，然后用来保持状态。

知识兔

StatelessWidget和StatefulWidget是flutter的基础组件，日常开发中自定义Widget都是选择继承这两者之一。

两者的区别在于状态的改变，StatelessWidget面向那些始终不变的UI控件，比如标题栏中的标题；而StatefulWidget则是面向可能会改变UI状态的控件，比如有点击反馈的按钮。StatelessWidget就没什么好研究的了，StatefulWidget的创建需要指定一个State，在需要更新UI的时候调用setState(VoidCallback fn)，并在VoidCallback中改变一些变量数值等，组件会重新build以达到刷新状态也就是刷新UI的效果。

知识兔 
import 'package:flutter/material.dart';
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter实例',
      home: new Counter(),
    ),
  );
}
class Counter extends StatefulWidget {
  @override
  _CounterState createState() => new _CounterState();
}
class _CounterState extends State<Counter> {
  int _count = 0;
  void _increment() {
    setState(
      () {
        _count += 1;
      }
    );
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter实例'),
      ),
      body: new Center(
        child: new Text(
            '按钮点击 $_count 次${ _count == 0 ? '' : '' }'),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _increment,
        tooltip: '增加',
        child: new Icon(Icons.add),
      ),
    );
  }
}
知识兔

为什么StatefulWidget和State是单独的对象呢？在Flutter中，这两种类型的对象有不同的生命周期。控件是临时对象，用于在当前状态下构建应用程序的呈现。State对象在被build()调用时是持久的，允许它们记住信息。

 上面的实例接受用户的输入并在构建方法中直接使用结果。在复杂的应用程序中，控件层次结构的不同控件可能负责不同功能;例如一个控件可能呈现一个复杂的用户界面，目的是收集具体信息，比如日期和位置，而另一个控件可以使用该信息来改变整体呈现。

知识兔td> 
import 'package:flutter/material.dart';
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter实例',
      home: new Counter(),
    ),
  );
}
class CounterDisplay extends StatelessWidget {
  CounterDisplay({this.count});
  final int count;
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text('按钮点击 $count 次'),
    );
  }
}
class CounterIncrementor extends StatelessWidget {
  CounterIncrementor({this.onPressed});
  final VoidCallback onPressed;
  @override
  Widget build(BuildContext context) {
    return new FloatingActionButton(
      onPressed: onPressed,
      tooltip: '增加',
      child: new Icon(Icons.add),
    );
  }
}
class Counter extends StatefulWidget {
  @override
  _CounterState createState() => new _CounterState();
}
class _CounterState extends State<Counter> {
  int _count = 0;
  void _increment() {
    setState(
      () {
        _count += 1;
      }
    );
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter实例'),
      ),
      body: new CounterDisplay(count: _count),
      floatingActionButton: new CounterIncrementor(onPressed: _increment),
    );
  }
}
知识兔

在上面的实例中，将计数显示(CounterDisplay)和计数改变(CounterIncrementor)干净的分离。虽然效果和上一个实例相同，但功能分离可以让一个控件中封装更复杂，同时也让父级更简单

原文:大专栏  Flutter根据用户输入改变控件 - 石头的博客

 

计算机