Flutter App开发，高效解决如何将用户登录手机号部分用星号代替在页面中展示

在开发App时，一般都会遇到个人中心的页面，这个时候页面中要展示出来用户当前登录手机号码，但是数据库存的是正常的手机号，需要前端自己来将部分用星号('*')代替。

第一步：定义一个变量 存储手机号

class PersonPage extends StatefulWidget {
  const PersonPage({Key? key}) : super(key: key);
  @override
  State createState() => _PersonPageState();
}

class _PersonPageState extends State {
  String phone = '13330205516';  // 第一步，定义变量
   
  @override
  Widget build(BuildContext context) {
        return Container()
    }
}

第二步：在页面初始化生命周期中去操作这个 phone变量，主要使用的是字符串的replaceRange(star, end, newStr)

class PersonPage extends StatefulWidget {
  const PersonPage({Key? key}) : super(key: key);
  @override
  State createState() => _PersonPageState();
}

class _PersonPageState extends State {
  String phone = '13330205516';  // 第一步，定义变量

  // 第二步： 添加下面这个方法，对phone变量进行操作
  @override
  void initState(){
      super.initState();
        // replaceRange() 用于处理替换某个字符串中的一节子串
        // 包括三个参数：
        // 第一个参数：截取子串开始下标的位置
        // 第二个参数：截取子串结束下标的位置
        // 第三个参数：用于替换截取下来的子串
      phone = phone.replaceRange(3,7, '****');
      print(phone);
    }
   
  @override
  Widget build(BuildContext context) {
        return Container()
    }
}

这个时候打印出来的phone就是将下标3到7替换为 第三个参数：'****'了，如图：

 第三步：在我们需要显示这个变量的地方，去调用这个变量即可。

ListTile(
    leading: SizedBox(
        height: 40,
        child: Text(phone, style: const TextStyle(
            letterSpacing: 2,
        ))
    ),
)

效果如下图：