Flutter给文本输入框添加实时计算输入字母的长度

已收录   阅读次数: 698
2021-07-1019:01:37 发表评论
摘要

继续学习Flutter的特效,这次学习的是计算输入字母计算字母长度的特效,而且很简单,伯衡君参考文档和其他人写的一些案例后,发现只需要设置一个变量,然后再改变它即可,分享给大家……

分享至:
Flutter给文本输入框添加实时计算输入字母的长度

开篇寄语

继续学习Flutter的特效,这次学习的是计算输入字母计算字母长度的特效,而且很简单,伯衡君参考文档和其他人写的一些案例后,发现只需要设置一个变量,然后再改变它即可,分享给大家。

内容详情

内容详情

以下内容大多是更改lib下的main.dart文件内容,删掉里面的内容,复制粘贴代码,开启调试就可以出现了。

  • 涉及Textfiled组件中一个名为InputDecoration的内容,属于装饰的一种,试举一例:
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // This variable holds the text typeed by the user
  var _enteredText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Center(
          child: TextField(
            onChanged: (value) {
              setState(() {
                _enteredText = value;
              });
            },
            decoration: InputDecoration(
                labelText: 'Your Name',
                border: OutlineInputBorder(),
                counterText: '${_enteredText.length.toString()} character(s)'),
          ),
        ),
      ),
    );
  }
}

生成的效果如下图所示:

Flutter给文本输入框添加实时计算输入字母的长度
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: