带有文本字段的卡片

Question

如何在 Textformfeild 中设计卡片视图这是我的示例代码，其中包含带有国家/地区选择器的卡片视图和文本表单字段，但它不起作用

Card(
                        elevation: 5.0,
                        child: Container(
                          height: 65,
                          width: 300,
                          child: Row(
                            children: <Widget>[
                              Column(
                                children: <Widget>[
                                  Row(
                                    children: <Widget>[
                                      Padding(
                                        padding:
                                            const EdgeInsets.only(left: 8.0),
                                        child: CountryPicker(
                                          dense: false,
                                          showFlag:
                                              false, //displays flag, true by default
                                          showDialingCode:
                                              false, //displays dialing code, false by default
                                          showName:
                                              true, //displays country name, true by default
                                          showCurrency:
                                              false, //eg. 'British pound'
                                          showCurrencyISO: true, //eg. 'GBP'
                                          onChanged: (Country country) {
                                            setState(() {
                                              _selected = country;
                                            });
                                          },
                                          selectedCountry: _selected,
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(top: 5.0),
                                        height: 50,
                                        width: 1,
                                        color: Colors.grey,
                                      ),
                                       TextFormField(
                                        keyboardType: TextInputType.number,
                                        textInputAction: TextInputAction.next,
                                        decoration: InputDecoration(
                                          counterText: "",
                                          labelText: "Mobile Number",
                                          labelStyle: TextStyle(
                                            color: Colors.grey,
                                            fontFamily: 'Poppins',
                                            fontWeight: FontWeight.w400,
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              )
                            ],
                          ),
                        ),
                      ),

Answer 1

我认为您已经添加了一个额外的行和列小部件。 此外，您必须将 TextFormField 包装在 Expanded 小部件内，以为其提供尽可能多的空间。

你可以用下面的代码试试，

Country _selected;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Card(
          elevation: 5.0,
          child: Container(
            height: 65,
            width: 300,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(left: 8.0),
                  child: CountryPicker(
                    dense: false,
                    showFlag: false,
                    //displays flag, true by default
                    showDialingCode: false,
                    //displays dialing code, false by default
                    showName: true,
                    //displays country name, true by default
                    showCurrency: false,
                    //eg. 'British pound'
                    showCurrencyISO: true,
                    //eg. 'GBP'
                    onChanged: (Country country) {
                      setState(() {
                        _selected = country;
                      });
                    },
                    selectedCountry: _selected,
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 5.0),
                  height: 50,
                  width: 1,
                  color: Colors.grey,
                ),
                Expanded(
                  child: TextFormField(
                    keyboardType: TextInputType.number,
                    textInputAction: TextInputAction.next,
                    decoration: InputDecoration(
                      counterText: "",
                      labelText: "Mobile Number",
                      labelStyle: TextStyle(
                        color: Colors.grey,
                        fontFamily: 'Poppins',
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

我认为它肯定会奏效。