如何在 Flutter 中一起滚动多个文本字段

编程问答 2022-05-26

问题描述

我有一种情况，其中 2 个文本字段被放置在一个 Stack Widget 中，彼此重叠。无论如何，如果数据超过屏幕大小，我可以将两个文本字段一起垂直滚动吗？

Stack(
              children: [
                Container(
                  width: MediaQuery.of(context).size.width,padding: EdgeInsets.fromLTRB(15,8,0),child: SyntaxView(
                      code: codeController.text,Syntax: Syntax.C,SyntaxTheme: SyntaxTheme.gravityDark(),withZoom: true,withLinesCount: true),),Container(
                  width: 362,padding: EdgeInsets.fromLTRB(55,12,child: TextFormField(
                    scrollPhysics: NeverScrollableScrollPhysics(),focusNode: codeFocus,controller: codeController,autofocus: true,keyboardType: TextInputType.multiline,maxLines: null,style: TextStyle(
                      color: Color(0x00ffffff),// color: Colors.yellow,height: 1.35,fontFamily: "CodeFont",fontSize: 12,decoration: Inputdecoration(
                      border: InputBorder.none,onChanged: (value) {
                      setState(() {
                        CODE = value;
                        // print("X : ${codeController.text}");
                      });
                    },],

解决方法

处理这种情况的一种简单方法是将您的内容包装在一个 ListView 中，该 ListView 处理其子项的滚动。以下是 ListView 文档中的一个片段作为示例：

ListView(
  padding: const EdgeInsets.all(8),children: <Widget>[
    Container(
      height: 50,color: Colors.amber[600],child: const Center(child: Text('Entry A')),),Container(
      height: 50,color: Colors.amber[500],child: const Center(child: Text('Entry B')),color: Colors.amber[100],child: const Center(child: Text('Entry C')),],)

https://api.flutter.dev/flutter/widgets/ListView-class.html

androidandroiddartiosioswidget