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,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

我认为它一定可以工作。

卡与文本字段

1 个答案: