这里我的列表视图没有滚动飞镖颤动,请帮助我我是颤振的新手

时间:2021-03-16 17:09:36

标签: flutter listview dart scrollview

return Scaffold(
   body: Container(
     width: MediaQuery.of(context).size.width,
     height: MediaQuery.of(context).size.height,
     child: Stack(
       children: [
         Positioned(
           width: MediaQuery.of(context).size.width,
           height: 25.0*SizeConfig.heightMultiplier,
           child:Container(
             decoration: BoxDecoration(
                 gradient: LinearGradient(
                     begin: Alignment.topCenter,
                     end: Alignment.bottomCenter,
                     colors: [Color(0xff009cba), Color(0xff000e11)])

             ),
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               crossAxisAlignment: CrossAxisAlignment.center,
               children: [
                 Expanded(flex:3,
                   child: Container(
                     child: Column(
                       mainAxisAlignment: MainAxisAlignment.center,
                       crossAxisAlignment: CrossAxisAlignment.end,
                       children: [
                         FittedBox(child: Text("Firm Details",style: GoogleFonts.lato(color: Color(0xfffbfbfb),fontSize: 1.6*SizeConfig.textMultiplier),/*TextStyle(color: Color(0xfffbfbfb),)*/)),
                         SizedBox(height: 0.5*SizeConfig.heightMultiplier,),
                         FittedBox(child: Text("Please select the category that best describes your business model.",style: GoogleFonts.lato(color: Color(0xffb3fbfbfb),fontSize: 1.3*SizeConfig.textMultiplier) /*TextStyle(color: Color(0xffb3fbfbfb),fontSize: 12.0)*/,)),
                       ],
                     ),
                   ),
                 ),
                 Expanded(flex:1,child:Container(
                   width: 10.0*SizeConfig.widthMultiplier,
                   height: 10.0*SizeConfig.heightMultiplier,
                   child:Image.asset("assets/images/firmDetail.png",width:1.0*SizeConfig.widthMultiplier,height: 1.0*SizeConfig.heightMultiplier,),
                 ), ),
               ],
             ),
           ), ),
         Positioned(
           top:20.0*SizeConfig.heightMultiplier,
           child:Container(
             width: MediaQuery.of(context).size.width,
             height: 500.0*SizeConfig.heightMultiplier,
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(5.0*SizeConfig.widthMultiplier),
               color: Colors.white,
             ),
             child:new Container(
               child: ListView(
                 scrollDirection: Axis.vertical,
                 children: <Widget>[
                   SizedBox(height: 2.0*SizeConfig.heightMultiplier,),
                   Center(child: Padding(
                     padding:  EdgeInsets.all(1.8*SizeConfig.heightMultiplier),
                     child: Text("Please select the category that best describes your business model.",style: GoogleFonts.lato(fontWeight: FontWeight.bold),),
                   )),
                   horizontalList1,
                   verticalList,    // here vertical list
                 ],
               ),
             ),
           ),
         ),
       ],
     ),
   ),
 );

在小部件垂直列表中,Listview 没有滚动,但是当我们在具有固定高度的表单之后添加 Sizedbox 时,它正在滚动,但我不需要滚动视图的固定高度

      Widget verticalList = new Container(
        margin: EdgeInsets.symmetric(vertical: 0*SizeConfig.heightMultiplier),
        height: MediaQuery.of(context).size.height,
        child:ListView(
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: [
            Form(
              key: _formKey,
              child:ListView(
                shrinkWrap: true,
                children: [
                  Padding(
                    padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
                    child: new TextFormField(
                      validator: (String value) {
                        if (value.isEmpty) {
                          return 'PinCode';
                        } else {
                          return null;
                        }
                      },
                      keyboardType: TextInputType.phone,
                      controller: _pincode,
                      // selectionColor:Color(0xffe4065f),
                      style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,),
                      decoration: const InputDecoration(
                        labelText: "PinCode",
                        labelStyle: TextStyle(color: Color(0xffe4065f)),
                        focusColor: Color(0xffe4065f),
                        hintText:
                        "PinCode",
                        hintStyle: TextStyle(fontSize: 13.0),
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(
                                color: Color(0xffe4065f))),
                      ),
                      //  style: Theme.of(context).textTheme.body1,
                    ),
                  ),
                  Padding(
                    padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
                    child: new TextFormField(
                      validator: (String value) {
                        if (value.isEmpty) {
                          return 'PAN of the unit. is required';
                        } else {
                          return null;
                        }
                      },
                      keyboardType: TextInputType.text,
                      controller: _pan,
                      // selectionColor:Color(0xffe4065f),
                      style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,),
                      decoration: const InputDecoration(
                        labelText: "PAN of the unit",
                        labelStyle: TextStyle(color: Color(0xffe4065f)),
                        focusColor: Color(0xffe4065f),
                        hintText:
                        "PAN of the unit",
                        hintStyle: TextStyle(fontSize: 13.0),
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(
                                color: Color(0xffe4065f))),
                      ),
                      //  style: Theme.of(context).textTheme.body1,
                    ),
                  ),
                  Padding(
                    padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
                    child: FormField<String>(
                      builder: (FormFieldState<String> state) {
                        return InputDecorator(
                          decoration: InputDecoration(
                            labelText: "Constitution",
                            errorStyle: TextStyle(color: Colors.redAccent, fontSize: 1.6*SizeConfig.textMultiplier),
                            hintText: 'Please select expense',),
                          isEmpty: _constitutions == '',
                          child: DropdownButtonHideUnderline(
                            child: DropdownButton<String>(
                              value: _constitutions,
                              isDense: true,
                              onChanged: (String newValue) {
                                setState(() {
                                  _constitutions = newValue;
                                  state.didChange(newValue);
                                });
                              },
                              items: _constitution.map((String value) {
                                return DropdownMenuItem<String>(
                                  value: value,
                                  child: Text(value,style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,)),
                                );
                              }).toList(),
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                  Padding(
                    padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
                    child: new TextFormField(
                      validator: (String value) {
                        if (value.isEmpty) {
                          return 'Line of Activity is required';
                        } else {
                          return null;
                        }
                      },
                      keyboardType: TextInputType.text,
                      controller: _lineActicity,
                      // selectionColor:Color(0xffe4065f),
                      style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,),
                      decoration: const InputDecoration(
                        labelText: "Line of Activity",
                        labelStyle: TextStyle(color: Color(0xffe4065f)),
                        focusColor: Color(0xffe4065f),
                        hintText:
                        "Line of Activity",
                        hintStyle: TextStyle(fontSize: 13.0),
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(
                                color: Color(0xffe4065f))),
                      ),
                      //  style: Theme.of(context).textTheme.body1,
                    ),
                  ),
                  Padding(
                    padding:EdgeInsets.only(
                      left: 1.0*SizeConfig.widthMultiplier,
                      right: 1.0*SizeConfig.widthMultiplier,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        FlatButton(
                          onPressed: () {
//x                        _postData();
                            if (!_formKey.currentState.validate()) {
                              //_formKey.currentState.save();
                              if (_constitutions == null || _districtSelectedValue == null) {
                                print("eroore");
                                Flushbar(
                                  message:  "please select required fields",
                                  duration:  Duration(seconds: 3),
                                )..show(context);
                              }  else {
                                // Every of the data in the form are valid at this point
                                _formKey.currentState.save();
                                print(_constitutions);
                              }
                            } else {
                              // submitOtp();
                              _postData();
                            }
                          },
                          child: Text(
                            "SAVE & NEXT",
                            style: GoogleFonts.lato(color: Colors.white),
                          ),
                          color: Color(0xffe4065f),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8.0),
                            side: BorderSide(color: Color(0xffe4065f)),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
         //   SizedBox(height: 1000,),
          ],
        )
    );

在这里,当我们在具有固定高度的表单之后添加 Sizedbox 时,它正在滚动,但我不需要固定高度的滚动视图,我是新手,请帮助

3 个答案:

答案 0 :(得分:1)

您可以使用 SingleChildScrollView 小部件包装主小部件

答案 1 :(得分:1)

我会建议一个简单的小部件层次结构,如

Scaffold
 - Container (For the red background)
  - Column
   - Container (with size for the lorem ipsom text.
    - Lorem Ipso Text.
   - Expanded (So that it will use the rest of the height automatically.)
    - Container (with white back ground and top rounded borders. Makes sure you add circular borders only to top and not to bottom of this container.
     - DefaultTabController
      - builder (to get different context of the default tab controller if more than one is used in your full app.)
       - Column
        - TabBar (if the number of categories is large use scrolling here as a property of the tab bar.) wrap in container if you need specific height of the tab bar.
        - Expanded
         - TabBarView to show the appropriate form.
          - SingleChildScrollView
           -Column
            -Your fields

答案 2 :(得分:0)

您的列表视图包装在一个很长且没有滚动条的容器中。所以它不会滚动,因为列表适合那个长容器。 对于列表视图,您需要固定高度。它是为列表可见部分提供的固定高度。取下包装容器或降低高度,使其全部显示在屏幕上。

还要看你对栈的使用。解决此问题后,您可能会遇到问题,并在文本“公司详细信息”等顶部滚动列表。