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

dart 同时被 3 个专栏收录
127 篇文章 1 订阅
119 篇文章 6 订阅
82 篇文章 1399 订阅

之前使用的都是无状态控件,无状态控件从父控件接收参数,以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实例',
      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)干净的分离。虽然效果和上一个实例相同,但功能分离可以让一个控件中封装更复杂,同时也让父级更简单。

  • 3
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页

打赏

何小有

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值