flutter - RenderBox 未布置：RenderPhysicalShape#47b25 relayoutBoundary=up2

Question

我InternationalPhoneNumberInput用来接收用户登录，当我弹出国家代码选择 UI 时，它显示此错误：

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#cfa17 relayoutBoundary=up2
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
The relevant error-causing widget was: 
  MaterialApp file:///home/dolphin/AndroidStudioProjects/Cruise/lib/src/widgets/CruiseApp.dart:26:12

这是我的InternationalPhoneNumberInput控件代码（我将代码替换为官方演示但仍然有这个错误）：

import 'package:cruise/src/common/global_style.dart';
import 'package:cruise/src/page/reg/reg.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:intl_phone_number_input/intl_phone_number_input.dart';

class LoginPage extends HookWidget {
  final PhoneNumber number = PhoneNumber(isoCode: 'CN');
  final TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final _formKey = useMemoized(() => GlobalKey<FormState>());
    final username = useState("");
    final password = useState("");
    final phoneValid = useState(false);
    final submitting = useState(false);
    double screenWidth = MediaQuery.of(context).size.width;

    final GlobalKey<FormState> formKey = GlobalKey<FormState>();

    final TextEditingController controller = TextEditingController();
    String initialCountry = 'NG';
    PhoneNumber number = PhoneNumber(isoCode: 'NG');

    return Scaffold(
        appBar: AppBar(
          title: Text(""),
          actions: [
            TextButton(
              style: GlobalStyle.textButtonStyle,
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => RegPage()));
              },
              child: Text("注册", style: TextStyle(fontSize: 16.0)),
            ),
          ],
        ),
        body: Form(
          key: _formKey,
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                InternationalPhoneNumberInput(
                  onInputChanged: (PhoneNumber number) {
                    print(number.phoneNumber);
                  },
                  onInputValidated: (bool value) {
                    print(value);
                  },
                  selectorConfig: SelectorConfig(
                    selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
                  ),
                  ignoreBlank: false,
                  autoValidateMode: AutovalidateMode.disabled,
                  selectorTextStyle: TextStyle(color: Colors.black),
                  initialValue: number,
                  textFieldController: controller,
                  formatInput: false,
                  keyboardType: TextInputType.numberWithOptions(signed: true, decimal: true),
                  inputBorder: OutlineInputBorder(),
                  onSaved: (PhoneNumber number) {
                    print('On Saved: $number');
                  },
                ),
                RaisedButton(
                  onPressed: () {
                    formKey.currentState!.validate();
                  },
                  child: Text('Validate'),
                ),
                RaisedButton(
                  onPressed: () {
                    //getPhoneNumber('[phone]');
                  },
                  child: Text('Update'),
                ),
                RaisedButton(
                  onPressed: () {
                    //formKey.currentState.save();
                  },
                  child: Text('Save'),
                ),
              ],
            ),
          ),
        ));
  }
}

   

我应该怎么做才能解决这个问题？这是依赖项：

  intl_phone_number_input: 0.6.0

标签： flutter

Answer 1

您是否尝试使用 SingleChildScrollView 将其包装如下：

Padding(
              //padding: const EdgeInsets.fromLTRB( 20.0, 120, 20.0, 40),
              padding: const EdgeInsets.all( 2),
              child: 
          
   SingleChildScrollView(child:
InternationalPhoneNumberInput(
                onInputChanged: (PhoneNumber number) {
                  username.value = number.phoneNumber;
                },
                locale: "zh",
                hintText: "手机号码",
                errorMessage:"无效的手机号码",
                onInputValidated: (bool value) {
                  phoneValid.value = value;
                },
                selectorConfig: SelectorConfig(
                  selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
                  backgroundColor: Colors.black,
                ),
                ignoreBlank: false,
                autoValidateMode: AutovalidateMode.disabled,
                selectorTextStyle: TextStyle(color: Colors.black),
                initialValue: number,
                textFieldController: controller,
                inputBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30.0),
                ),
                inputDecoration: InputDecoration(
                  //fillColor: Colors.black,
                ),
              ),
    ),
            )

这是 CruiseApp 的定义：

import 'package:Cruise/src/home/home_new.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:Cruise/src/common/theme.dart';
import 'package:Cruise/src/common/view_manager.dart';

class CruiseApp extends HookWidget {
  const CruiseApp({@required this.theme, @required this.view});

  final ThemeData theme;
  final ViewType view;

  @override
  Widget build(BuildContext context) {
    final themeManager = useProvider(themeProvider);
    final viewManager = useProvider(viewProvider);
    useMemoized(() {
      // TODO: Right now this triggers a rebuild, so unfortunately you'll see a flash of default theme.
      themeManager.setTheme(theme);
      viewManager.setView(view);
    });

    final currentTheme = useProvider(themeProvider.state);
    return MaterialApp(
      title: 'Cruise',
      theme: currentTheme,
      routes: {
        "home": (context) => HomeNew(),
      },
      home: HomeNew(),
    );
  }
}