如何解决颤动：如何在文本字段中显示货币数字
我想制作一个 import React,{ useState,useEffect } from 'react';
import {
Text,View,StyleSheet,TouchableOpacity,FlatList,} from 'react-native';
import Constants from 'expo-constants';
const styles = StyleSheet.create({
row: {
flexDirection: 'row',justifyContent: 'flex-end',marginRight: 15,marginTop: 15,},btnWrap: {
width: 50,height: 24,backgroundColor: 'white',borderWidth: 1,borderColor: 'pink',justifyContent: 'center',alignItems: 'center',margin: -2,textStyle: {
fontSize: 10,fontWeight: 'normal',color: 'pink',btnLeft: {
borderTopLefTradius: 6,borderBottomLefTradius: 6,btnRight: {
borderTopRighTradius: 6,borderBottomrighTradius: 6,selected: {
backgroundColor: 'black',selectedText: {
color: 'white',});
const pointType = ['one','two','three','four','five','six'];
export default MypagePoint = ({ totalPoint }) => {
const [btnClicked,setBtnClicked] = useState(null);
const buttonStyle = (index) => {
if (index === 0) return styles.btnLeft;
else if (index === pointType.length - 1) return styles.btnRight;
};
return (
<View style={[styles.container]}>
<View style={[styles.row,{ marginBottom: 15 }]}>
{pointType.map((type,index) => (
<Button
index={index}
btnClicked={btnClicked}
buttonStyle={buttonStyle}
setBtnClicked={setBtnClicked}
type={type}
/>
))}
</View>
</View>
);
};
const Button = ({ index,btnClicked,buttonStyle,setBtnClicked,type }) => {
return (
<TouchableOpacity
style={[
styles.btnWrap,btnClicked === index && styles.selected,buttonStyle(index),]}
onPress={() => setBtnClicked(index)}>
<Text
style={[styles.textStyle,btnClicked === index && styles.selectedText]}>
{type}
</Text>
</TouchableOpacity>
);
};
以输入韩元（韩币）的金额，就像这些图片一样。 
textfield解决方法
也许 this 资源可以帮助您
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 300,child: TextField(
decoration: InputDecoration(
border: const OutlineInputBorder(),),keyboardType: TextInputType.number,inputFormatters: [ThousandsSeparatorInputFormatter()],);
}
}
class ThousandsSeparatorInputFormatter extends TextInputFormatter {
static const separator = ','; // Change this to '.' for other locales
@override
TextEditingValue formatEditUpdate(
TextEditingValue oldValue,TextEditingValue newValue) {
// Short-circuit if the new value is empty
if (newValue.text.length == 0) {
return newValue.copyWith(text: '');
}
// Handle "deletion" of separator character
String oldValueText = oldValue.text.replaceAll(separator,'');
String newValueText = newValue.text.replaceAll(separator,'');
if (oldValue.text.endsWith(separator) &&
oldValue.text.length == newValue.text.length + 1) {
newValueText = newValueText.substring(0,newValueText.length - 1);
}
// Only process if the old value and new value are different
if (oldValueText != newValueText) {
int selectionIndex =
newValue.text.length - newValue.selection.extentOffset;
final chars = newValueText.split('');
String newString = '';
for (int i = chars.length - 1; i >= 0; i--) {
if ((chars.length - 1 - i) % 3 == 0 && i != chars.length - 1)
newString = separator + newString;
newString = chars[i] + newString;
}
return TextEditingValue(
text: newString.toString(),selection: TextSelection.collapsed(
offset: newString.length - selectionIndex,);
}
// If the new value and old value are the same,just return as-is
return newValue;
}
}
您可以使用 flutter_masked_text 包：
安装包并导入依赖项后创建一个控制器：
var controller = MoneyMaskedTextController(
thousandSeparator: ',',rightSymbol: ' 원',decimalSeparator: '',precision: 0);
在您的文本字段中使用它：
TextField(
keyboardType: TextInputType.number,textAlign: TextAlign.end,controller: controller,得到你想要的结果： final result
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
