Flutter基础—根据用户输入改变控件

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

之前使用的都是无状态控件，无状态控件从父控件接收参数，以final成员变量存储。当一个控件被build时，它使用这些存储的值作为创建控件的参数。

为了构建更友好的体验，比如以更有趣的方式对用户的输入做出响应，应用程序通常会有一些状态。Flutter使用StatefulWidgets实现这个想法。StatefulWidgets能够生成有状态对象的控件，然后用来保持状态。

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()调用时是持久的，允许它们记住信息。

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

import 'package:Flutter/material.dart';voID main() {  runApp(    new MaterialApp(      Title: 'Flutter实例',);}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,);  }}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基础—根据用户输入改变控件全部内容，希望文章能够帮你解决Flutter基础—根据用户输入改变控件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。