我们如何做这种类型,如果数字是28之前的2位数字00将被阴影,如果它是5之前的3位数字将被阴影在 Flutter
cs7cruho1#
您可以将它们拆分为两个Text小部件。例如:
Text
import 'package:flutter/material.dart'; final data = ['0028', '1234', '0002', '0005', '1010', '0101', '0000']; void main() { runApp(const MaterialApp(home: MyApp())); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: Padding( padding: const EdgeInsets.all(8.0), child: ListView.builder( itemCount: data.length, itemBuilder: (context, index) { var splitIndex = data[index].indexOf(RegExp('[^0]')); if (splitIndex == -1) splitIndex = data[index].length; return Row(children: [ Text(data[index].substring(0, splitIndex), style: const TextStyle(color: Colors.red)), Text(data[index].substring(splitIndex, data[index].length)), ]); }, ), ), ); } }
输出:
myzjeezk2#
这个小部件应该可以做到这一点,改变TextStyle以满足您的需要,如果您只处理数字,您可能希望将文本更新为int!
import 'package:flutter/material.dart'; class PadString extends StatelessWidget { final String text; final int charCount; final String padChar; const PadString({ Key? key, required this.text, this.charCount = 4, this.padChar = "0", }) : super(key: key); @override Widget build(BuildContext context) { var padCount = charCount - text.length; return Row( children: [ for (int i = 0; i < padCount; i++) Text( padChar, style: const TextStyle(color: Colors.grey), ), Text( text, style: const TextStyle(color: Colors.orange), ), ], ); } }
rkkpypqq3#
I hope the below code will help you : class ShadedNumberInput extends StatefulWidget { @override _ShadedNumberInputState createState() => _ShadedNumberInputState(); } class _ShadedNumberInputState extends State<ShadedNumberInput> { final _controller = TextEditingController(); String _lastValue = ''; void _onChanged(String value) { // Determine how many digits to shade based on the input value int numDigitsToShade = 0; if (value.isNotEmpty && _lastValue != value) { if (int.parse(value) == 28) { numDigitsToShade = 2; } else if (int.parse(value) == 5) { numDigitsToShade = 3; } _lastValue = value; } // Update the text controller with the shaded value String shadedValue = value.padLeft(value.length + numDigitsToShade, '0'); _controller.value = TextEditingValue( text: shadedValue, selection: TextSelection.collapsed(offset: shadedValue.length), ); } @override Widget build(BuildContext context) { return TextFormField( controller: _controller, keyboardType: TextInputType.number, onChanged: _onChanged, ); } }
3条答案
按热度按时间cs7cruho1#
您可以将它们拆分为两个
Text
小部件。例如:输出:
myzjeezk2#
这个小部件应该可以做到这一点,改变TextStyle以满足您的需要,如果您只处理数字,您可能希望将文本更新为int!
rkkpypqq3#