flutter_tzh/lib/home/view/YSInputView.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../../tool/YSTools.dart';

class YSInputView extends StatefulWidget {
  final Map item;
  final int length;
  const YSInputView({Key? key, required this.item, this.length = 100}) : super(key: key);

  @override
  YSInputViewState createState() => YSInputViewState();
}

class YSInputViewState extends State<YSInputView> {
  final TextEditingController _editingController = TextEditingController();
  @override
  void dispose() {
    _editingController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      height: hsp(87),
      decoration: BoxDecoration(
        color: const Color(0xFF1A1C1F),
        border: Border.all(color: const Color(0xFF3E434E),width: hsp(1)),
        borderRadius: const BorderRadius.all(Radius.circular(3))
      ),
      padding: EdgeInsets.all(hsp(10)),
      child: Column(
        children: [
          SizedBox(
            height: hsp(50),
            child: CupertinoTextField(
              placeholderStyle: TextStyle(fontSize: zsp(14),color: ysValueColor),
              style: TextStyle(fontSize: zsp(14),color: ysValueColor),
              padding: const EdgeInsets.all(0),
              placeholder: '请输入${widget.item['title']}',
              decoration: const BoxDecoration(color: Colors.transparent),
              maxLines: 100,
              controller: _editingController,
              maxLength: widget.length,
              onChanged: (value){
                if(value.isNotEmpty){
                  widget.item['value'] = value;
                }else{
                  widget.item.remove('value');
                }
                setState(() {});
              },
            ),
          ),
          Container(
            height: hsp(15),
            alignment: Alignment.centerRight,
            child: Text('${_editingController.text.length}/${widget.length}',style: TextStyle(fontSize: zsp(14),color: const Color(0xFFACB5C5)),),
          )
        ],
      )
    );
  }
}


class YSInputView2 extends StatefulWidget {
  final Map item;
  final int length;
  final int height;
  final bool isEnable;
  const YSInputView2({Key? key, required this.item, this.length = 100, this.height = 80, this.isEnable = true}) : super(key: key);

  @override
  YSInputView2State createState() => YSInputView2State();
}

class YSInputView2State extends State<YSInputView2> {
  final TextEditingController _editingController = TextEditingController();
  @override
  void initState() {
    _editingController.text = widget.item['value']??'';
    super.initState();
  }
  @override
  void dispose() {
    _editingController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: hsp(widget.height),
          child: widget.isEnable?CupertinoTextField(
            placeholderStyle: TextStyle(fontSize: zsp(14),color: ysValueColor),
            style: TextStyle(fontSize: zsp(14),color: ysValueColor),
            padding: const EdgeInsets.all(0),
            placeholder: '请输入${widget.item['title']}',
            decoration: const BoxDecoration(color: Colors.transparent),
            maxLines: 100,
            controller: _editingController,
            maxLength: widget.length,
            onChanged: (value){
              if(value.isNotEmpty){
                widget.item['value'] = value;
              }else{
                widget.item.remove('value');
              }
              setState(() {});
            },
          ):Align(
            alignment: Alignment.topLeft,
            child: Text(_editingController.text,style: TextStyle(fontSize: zsp(14),color: ysValueColor),),
          )
        ),
        widget.isEnable?Container(
          height: hsp(20),
          alignment: Alignment.centerRight,
          child: Text('${_editingController.text.length}/${widget.length}',style: TextStyle(fontSize: zsp(14),color: const Color(0xFFACB5C5)),),
        ):Container(height: hsp(20))
      ],
    );
  }
}

class YSInputView3 extends StatefulWidget {
  final String title;
  final String value;
  final ValueSetter valueSetter;
  final bool isSec;
  const YSInputView3({Key? key, required this.title, required this.valueSetter, this.isSec = false, this.value = ''}) : super(key: key);

  @override
  YSInputView3State createState() => YSInputView3State();
}

class YSInputView3State extends State<YSInputView3> {
  bool _isSec = false;
  final TextEditingController _editingController = TextEditingController();

  @override
  void initState() {
    _editingController.text = widget.value;
    _isSec = widget.isSec;
    super.initState();
  }
  // @override
  // void didUpdateWidget(covariant YSInputView3 oldWidget) {
  //   if(oldWidget.value!=widget.value){
  //     _editingController.text = widget.value;
  //   }
  //   super.didUpdateWidget(oldWidget);
  // }
  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
          color: const Color(0xFF1A1C1F),
          border: Border.all(color: const Color(0xFF3E434E),width: hsp(1)),
          borderRadius: const BorderRadius.all(Radius.circular(3))
        ),
        padding: EdgeInsets.all(hsp(10)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: hsp(15),
              child: Text(widget.title,style: TextStyle(fontSize: zsp(11),color: const Color(0xFFACB5C5)),),
            ),
            SizedBox(
              height: hsp(30),
              child: CupertinoTextField(
                placeholderStyle: TextStyle(fontSize: zsp(14),color: ysValueColor),
                style: TextStyle(fontSize: zsp(14),color: ysValueColor),
                padding: const EdgeInsets.all(0),
                placeholder: '请输入${widget.title}',
                decoration: const BoxDecoration(color: Colors.transparent),
                controller: _editingController,
                onChanged: (value){
                  setState(() {});
                  widget.valueSetter(value);
                },
                obscureText: _isSec,
                suffix: Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(left: 5,right: 5),
                      child: widget.isSec?GestureDetector(
                        onTap: (){
                          _isSec = !_isSec;
                          setState(() {});
                        },
                        child: Image.asset('images/${_isSec?'eye-slash':'eye'}.png',height: hsp(15),width: hsp(15),color: Colors.white,)
                      ):Container(width: hsp(20),),
                    ),
                    if(_editingController.text.isNotEmpty)GestureDetector(
                      onTap: (){
                        _editingController.text = '';
                        setState(() {});
                      },
                      child: Image.asset('images/tzh_clear.png',height: hsp(20),width: hsp(20),),
                    )
                  ],
                ),
              ),
            ),
          ],
        )
    );
  }
}