flutter 가 공공 구성 요 소 를 도입 하여 ListView 에 문 제 를 표시 하지 않 습 니 다(전역 구성 요소 재 활용 문제)

이상 문제:RenderCustomMultiChildLayoutBox object was given an infinite size during layot 서브 레이아웃 에 명확 한 크기 가 없 으 면 Scaffold 비계 공공 구성 요소 의 구축 은 다음 과 같은 방식 을 사용 할 수 없습니다.

class LoginWidget extends StatefulWidget {
  @override
  State createState() {
    return _LoginState();
  }
}

class _LoginState extends State {
  final phoneController = TextEditingController();
  final pwdController = TextEditingController();

  @override
  Widget build(BuildContext context) {
  //   Container  scaffold
    return Container(
        child: Container(
            alignment: AlignmentDirectional.center,
            child: Padding(
              padding: EdgeInsets.fromLTRB(30.0, 32.0, 30.0, 0),
              child: Column(
                children: [
                  Image(
                    image: AssetImage("images/course_logo.png"),
                    width: 139,
                    height: 38,
                    fit: BoxFit.contain,
                  ),
                  inputPhone(context),

                  inputPassword(context),

                  loginWidget(context),

                  loginByWX(context),
                ],
              ),
            )),
    );
  }

도 입 된 공공 구성 요소 widget 샘플(로그 인 모듈)

import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:micro_course/bean/LoginMsg.dart';
import 'package:micro_course/utils/HexColor.dart';
import 'package:micro_course/http/DioManger.dart';
import 'package:micro_course/http/APIConfig.dart';
import 'package:micro_course/common/eventbus.dart';
import 'package:fluwx/fluwx.dart' as fluwx;

class LoginWidget extends StatefulWidget {
  @override
  State createState() {
    return _LoginState();
  }
}

class _LoginState extends State {
  final phoneController = TextEditingController();
  final pwdController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Container(
            alignment: AlignmentDirectional.center,
            child: Padding(
              padding: EdgeInsets.fromLTRB(30.0, 32.0, 30.0, 0),
              child: Column(
                children: [
                  Image(
                    image: AssetImage("images/course_logo.png"),
                    width: 139,
                    height: 38,
                    fit: BoxFit.contain,
                  ),
                  inputPhone(context),

                  inputPassword(context),

                  loginWidget(context),

                  loginByWX(context),
                ],
              ),
            )),
    );
  }

  ///     
  Widget inputPhone(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 40),
      child: Container(
        height: 50,
        width: 307,
        padding: EdgeInsets.only(left: 10.0),
        alignment: AlignmentDirectional.center,
        decoration: BoxDecoration(
            color: Colors.grey[200], borderRadius: BorderRadius.circular(15)),
        child: TextField(
//          autofocus: true,
          controller: phoneController,
          decoration: InputDecoration(
            hintText: "      ",
            border: InputBorder.none,
            contentPadding: EdgeInsets.zero,
          ),
          onChanged: (v) {
//                      print("   :$v");
          },
        ),
      ),
    );
  }

  ///     
  Widget inputPassword(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 20),
      child: Container(
        height: 50,
        width: 307,
        padding: EdgeInsets.only(left: 10.0),
        alignment: AlignmentDirectional.center,
        decoration: BoxDecoration(
            color: Colors.grey[200], borderRadius: BorderRadius.circular(15)),
        child: TextField(
//          autofocus: true,
          controller: pwdController,
          decoration: InputDecoration(
            hintText: "     ",
            border: InputBorder.none,
            contentPadding: EdgeInsets.zero,
          ),
          onChanged: (v) {
//                      print("  :$v");
          },
        ),
      ),
    );
  }

  ///        
  Widget loginWidget(BuildContext context) {
    return GestureDetector(
      onTap: () {
        var params = {
          "phone": phoneController.text,
          "password": pwdController.text,
        };
        login(params, context);

//        Scaffold.of(context).showSnackBar(SnackBar(
//          content: Text('    '+phoneController.text),
//        ));
      },
      child: Padding(
        padding: EdgeInsets.fromLTRB(7.5, 0, 7.5, 0),
        child: Container(
          height: 120,
          child: Stack(
            alignment: AlignmentDirectional.center,
            children: [
              Container(
                height: 50,
                width: 307,
                decoration: BoxDecoration(
                  color: Colors.yellow[800],
                  borderRadius: BorderRadius.all(Radius.circular(45)),
                ),
              ),
              Text(
                '  ',
                style: TextStyle(fontSize: 18, color: HexColor('#824E00')),
              ),
            ],
          ),
        ),
      ),
    );
  }

  ///       
  Widget loginByWX(BuildContext context) {
    return GestureDetector(
      onTap: loginWX,
      child: Container(
//        height: 50,
        alignment: AlignmentDirectional.center,
        child: Padding(
          padding: EdgeInsets.all(2),
          child: Image(
            image: AssetImage("images/send.png"),
            width: 139,
            height: 40,
            fit: BoxFit.contain,
          ),
        ),
      ),
    );
  }

  void login(Map params, BuildContext context) {
    DioManger.getInstance().post(APIConfig.LOGIN, params, null, (data) {
      setState(() {
        print("    ：" + data.toString());
        Map jsonMsg = json.decode(data.toString());
        LoginMsg loginMsg = LoginMsg.fromJson(jsonMsg);
        print("json    ：" + loginMsg.toString());

        ///  UI
//            Navigator.pushReplacement(context, MaterialPageRoute(
//                builder: (context) => BottomNavigationWidget(),
//                settings: RouteSettings(
//                arguments:jsonMsg,
//               ),
//            ));
        getUserCourseList(loginMsg);
      });
    }, (error) {
      setState(() {});
      print("    ：" + error.toString());
    });
  }

  ///        
  void getUserCourseList(LoginMsg loginMsg) {
    ///    Map     
    Map parms = {
      "student_id": loginMsg.data.studentId.toString()
    };
    Map headers = {
      "token": loginMsg.data.loginToken.toString()
    };
    DioManger.getInstance().get(APIConfig.GET_COURSE_LIST, parms, headers,
            (data) {
          print("        ：" + data.toString());

          ///           
          bus.emit('login', loginMsg);
        }, (error) {
          print("        ：" + error.toString());
        });
  }

  ///    
  void loginWX() {
    print("    ");
    fluwx
        .sendAuth(scope: "snsapi_userinfo", state: "wechat_sdk_demo_test")
        .then((data) {
      setState(() {
        print("        ：" + data.toString());
      });
    }).catchError((e) {
      print('weChatLogin  e  $e');
    });
  }
}

공공 구성 요소 도입

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:micro_course/widgets/login.dart';

class CourseScreen extends StatefulWidget {
  @override
  State createState() {
    return _LoginState();
  }
}

class _LoginState extends State {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomPadding: false,
        appBar: AppBar(
          title: Text(
            '  ',
            style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.normal,
                color: Colors.black87),
          ),
          centerTitle: true,
          actions: [
            IconButton(
                icon: Icon(
                  Icons.more_horiz,
                  color: Colors.grey,
                ),
                onPressed: () {
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('    ')));
                })
          ],
        ),
        body: ListView(
          shrinkWrap: true,///             ListView    
          children: [
            Container(
                alignment: AlignmentDirectional.center,
                child: LoginWidget(),///        
            ),
          ],
        ));
  }
}

메모:이 구성 요 소 는 입력 상자 가 있 기 때문에 도입 할 때 공공 구성 요 소 는 lisetview 등 미끄럼 목록 에 두 어야 합 니 다.그렇지 않 으 면 키보드 가 튕 길 때 레이아웃 이 경 계 를 넘 는 이상 이 발생 할 수 있 습 니 다.또한 위 에서 언급 한 공공 구성 요소 에서 구성 요소 의 크기 가 명확 하지 않 으 면 Scaffold 비 계 를 사용 할 수 없고 container 등 용기 로 대체 해 야 합 니 다