หลายบรรทัด Textfield ในกระพือ

อาจฟังดูง่าย แต่เราจะทำช่องข้อความที่แก้ไขได้หลายบรรทัดในกระพือปีกได้อย่างไร? TextField ใช้งานได้กับบรรทัดเดียวเท่านั้น

แก้ไข:ข้อควรระวังบางประการเพราะดูเหมือนจะไม่ชัดเจน แม้ว่าคุณจะสามารถตั้งค่ามัลติไลน์ให้ตัดเนื้อหาข้อความได้ แต่ก็ยังไม่ใช่มัลติไลน์ เป็นบรรทัดเดียวแสดงเป็นหลายบรรทัด ถ้าอยากทำอะไรแบบนี้ก็ทำไม่ได้ เพราะคุณไม่สามารถเข้าถึงENTERปุ่ม และไม่มีปุ่ม Enter หมายความว่าไม่มีมัลติไลน์

หากต้องการใช้การตัดอัตโนมัติเพียงตั้งค่า maxLinesเป็นnull:

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null,
)

หากmaxLinesคุณสมบัติคือnullไม่มีการ จำกัด จำนวนบรรทัดและเปิดใช้งานการตัด

หากคุณต้องการให้ TextField ของคุณปรับให้เข้ากับอินพุตของผู้ใช้ให้ทำสิ่งนี้:

TextField(
    keyboardType: TextInputType.multiline,
    minLines: 1,//Normal textInputField will be displayed
    maxLines: 5,// when user presses enter it will adapt to it
    );

ที่นี่กำหนดเส้นสูงสุดเป็นสิ่งที่คุณต้องการและคุณพร้อมที่จะไป ในความคิดของฉันการตั้งค่า maxlines เป็น null ไม่ใช่ทางเลือกที่ดีเราควรตั้งเป็นค่าบางอย่าง

แม้ว่าคนอื่น ๆ จะพูดถึงแล้วว่าสามารถใช้แป้นพิมพ์ประเภท "TextInputType.multiline" ได้ แต่ฉันต้องการเพิ่มการใช้งาน TextField ที่ปรับความสูงโดยอัตโนมัติเมื่อป้อนบรรทัดใหม่เนื่องจากมักต้องการแสดงพฤติกรรมการป้อนข้อมูลของ WhatsApp และแอปที่คล้ายกัน

ฉันกำลังวิเคราะห์จำนวนแชท '\ n' ในอินพุตเพื่อจุดประสงค์นี้ทุกครั้งที่มีการเปลี่ยนแปลงข้อความ ดูเหมือนจะเป็นการใช้งานมากเกินไป แต่น่าเสียดายที่ฉันไม่พบความเป็นไปได้ที่ดีกว่าในการบรรลุเป้าหมายนี้ใน Flutter และฉันไม่สังเกตเห็นปัญหาด้านประสิทธิภาพแม้แต่ในสมาร์ทโฟนรุ่นเก่า

class _MyScreenState extends State<MyScreen> {
  double _inputHeight = 50;
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _textEditingController.addListener(_checkInputHeight);
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  void _checkInputHeight() async {
    int count = _textEditingController.text.split('\n').length;

    if (count == 0 && _inputHeight == 50.0) {
      return;
    }
    if (count <= 5) {  // use a maximum height of 6 rows 
    // height values can be adapted based on the font size
      var newHeight = count == 0 ? 50.0 : 28.0 + (count * 18.0);
      setState(() {
        _inputHeight = newHeight;
      });
    }
  }


  // ... build method here
  TextField(
    controller: _textEditingController,
    textInputAction: TextInputAction.newline,
    keyboardType: TextInputType.multiline,
    maxLines: null,
  )

ใช้สิ่งนี้

TextFormField(
      keyboardType: TextInputType.multiline,
      maxLines: //Number_of_lines(int),)

TextFieldมีคุณสมบัติmaxLines

ใช้expandsและคุณไม่จำเป็นต้องให้minLinesหรือmaxLinesคุณค่าใด ๆ :

TextField(
  maxLines: null,
  expands: true, 
  keyboardType: TextInputType.multiline,
)

   TextFormField(
                  minLines: 2,
                  maxLines: 5,
                  keyboardType: TextInputType.multiline,
                  decoration: InputDecoration(
                    hintText: 'description',
                    hintStyle: TextStyle(
                      color: Colors.grey
                    ),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(20.0)),
                    ),
                  ),
                ),

หากข้างต้นไม่ได้ผลสำหรับคุณลองเพิ่มminLinesด้วย

TextField(
        keyboardType: TextInputType.multiline,
        minLines: 3,
        maxLines: null);

ระบุTextInputAction.newlineเพื่อให้TextFieldตอบสนองต่อคีย์ Enterและยอมรับอินพุตแบบหลายบรรทัด :

textInputAction: TextInputAction.newline,

แม้ว่าคำถามนี้จะค่อนข้างเก่า แต่ก็ไม่มีคำตอบที่ครอบคลุมซึ่งอธิบายถึงวิธีการปรับขนาดแบบไดนามิกTextFieldโดยใช้ความพยายามเพียงเล็กน้อยของนักพัฒนา สิ่งนี้มีความสำคัญอย่างยิ่งเมื่อTextFieldวางไว้ใน flexbox เช่น ListView, SingleChildScrollView เป็นต้น (flexbox จะไม่สามารถกำหนดขนาดที่แท้จริงของสิ่งที่ขยายได้TextField)

ตามที่แนะนำโดยผู้ใช้อื่น ๆ สร้างสิ่งที่คุณTextFieldชอบ:

TextField(
  textInputAction: TextInputAction.newline,
  keyboardType: TextInputType.multiline,
  minLines: null,
  maxLines: null,  // If this is null, there is no limit to the number of lines, and the text container will start with enough vertical space for one line and automatically grow to accommodate additional lines as they are entered.
  expands: true,  // If set to true and wrapped in a parent widget like [Expanded] or [SizedBox], the input will expand to fill the parent.
)

วิธีรับมือกับความสูงภายในที่หายไปของTextField?

ห่อTextFieldในIntrinsicHeightคลาสเพื่อจัดเตรียมความสูงภายในที่คำนวณแบบไดนามิกของสิ่งที่ขยายได้TextFieldให้กับพาเรนต์ (เมื่อร้องขอผ่านเช่น flexbox)

สถานะเอกสารอย่างเป็นทางการ : maxLinesคุณสมบัติสามารถตั้งค่าเป็น null เพื่อลบข้อ จำกัด เกี่ยวกับจำนวนบรรทัด โดยค่าเริ่มต้นจะเป็นช่องเดียวซึ่งหมายความว่าเป็นช่องข้อความบรรทัดเดียว

หมายเหตุ: maxLinesต้องไม่เป็นศูนย์

สำหรับวิดเจ็ต TextFormFieldคุณสามารถตั้งค่า minLines และ maxLines ได้หากคุณต้องการกำหนดจำนวนบรรทัดที่แก้ไข มิฉะนั้นคุณสามารถตั้งค่า maxLines เป็น null ได้

TextFormField(
      minLines: 5,
      maxLines: 7,
      decoration: InputDecoration(
          hintText: 'Address',
          border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
          ),
      ),
),