logo标签列表

如何解决Flutter中部件溢出的问题？

flutterdartoverflowflutter-layout
7
我有一个问题的图像，溢出了17个像素。我无法解决它？ 首先，我做了什么..!!! 我使用了一个Row()小部件，并用Container()包装，在其中使用了两个Expanded()小部件。一个是用于TextField()，另一个是用于CountryPickerDropdown()。

enter image description here

我已经使用了country_pickers插件

代码:

 new Container(
                          width: MediaQuery.of(context).size.width,
                          padding: const EdgeInsets.only(left: 10.0),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(5.0)),
                          border: Border.all(color: Colors.blue)
                        ),  
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              child: CountryPickerDropdown(
                                initialValue: 'in',

                                itemBuilder: _buildDropdownItem,
                                onValuePicked: (Country country) {

                                  isCountryCodeSelected=true;
                                  print("${country.name}");
                                  print("${country.phoneCode}");
                                  print("${country.isoCode}");
                                  print("+${country.phoneCode}(${country.isoCode})");
                                 setState(() {
                                  countryCode= country.phoneCode;
                                });
                                },
                              ),
                            ),
                            Expanded(
                              child: TextField(
                              keyboardType: TextInputType.phone,
                              decoration: InputDecoration(
                                border: InputBorder.none, 
                                hintText: "Telephone Number", 
                              ),

                              onChanged: (value){

                               setState(() {
                                 phoneValue=value; 
                               });

                                print("phoneNumbe:$phoneNo");
                                this.phoneNo = isCountryCodeSelected ? "+" + countryCode + value : "+91" + value ;
                                print("phoneNo="+phoneNo);

                              },

                            ),
                            )
                          ],
                        )
                      ),

国家代码和国旗图像的小部件：

 Widget _buildDropdownItem(Country country) => Container(
    child: Row(
        children: <Widget>[
          CountryPickerUtils.getDefaultFlagImage(country),
          SizedBox(
            width: 8.0,
          ),
          Text("+${country.phoneCode}(${country.isoCode})"),
        ],
      ),   
  );
将两个“Expanded”替换为“Flexible”。 - Ryosuke
我已经替换了它，但什么都没发生。问题仍然存在，和之前一样，溢出了17个像素。 - Shruti Ramnandan Sharma
尝试使用带有Flex的Expand小部件。 - Ankit Gupta
@AnkitGupta 我尝试了，但是出现了异常，屏幕上什么也没有显示。 - Shruti Ramnandan Sharma
@ShrutiRamnandanSharma，你可以尝试取2或3列，根据你需要构建所需UI的小部件数量，在盒子内进行构建。 - Ankit Gupta
5个回答
4
怀疑您的countryselector小部件需要扩展子元素和文本溢出。
 Widget _buildDropdownItem(Country country) =>  Row(
        children: <Widget>[
            Expanded(child: Container(
             margin: EdgeInsets.only(right: 8),
             child: CountryPickerUtils.getDefaultFlagImage(country)),),
            Expanded(child: Text(
              "+${country.phoneCode}(${country.isoCode})",
                overflow: Overflow.Eclipse
            ),)
        ],

  );
“Eclipse”不支持。出现错误“The getter 'Eclipse' isn't defined for the class 'Overflow'”。那么我应该导入哪个库？ - Shruti Ramnandan Sharma
你可以使用除了none以外的任何溢出类型，我是在浏览器中手动输入而没有自动完成。 - Marius Schmack
对于自动换行，请使用TextOverflow.visible。 - samson matt
溢出：TextOverflow.ellipsis - Fawaz Ashraf
2

只需删除CountryPickerDropdown小部件上面的Expanded小部件即可。

如果我们在两个子级上都设置了Expanded小部件，两者都会尝试获取最大宽度。因此，如果我们只在textfield上设置expanded小部件，则textfield将占据屏幕剩余的宽度。以下是带有小设备屏幕截图输出的工作代码片段。

Container(
      width: MediaQuery.of(context).size.width,
      padding: const EdgeInsets.only(left: 10.0),
      decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(5.0)),
          border: Border.all(color: Colors.blue)),
      child: Row(
        children: <Widget>[
          CountryPickerDropdown(
            initialValue: 'in',
            itemBuilder: _buildDropdownItem,
            onValuePicked: (Country country) {
              print("${country.name}");
              print("${country.phoneCode}");
              print("${country.isoCode}");
              print("+${country.phoneCode}(${country.isoCode})");
            },
          ),
          Expanded(
            child: TextField(
              keyboardType: TextInputType.phone,
              decoration: const InputDecoration(
                border: InputBorder.none,
                hintText: "Telephone Number 14655656556",
              ),
              onChanged: (value) {},
            ),
          )
        ],
      )),
  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: const Icon(Icons.add),
  ), // This trailing comma makes auto-formatting nicer for build methods.
);

enter image description here

1

包装已被行取代，文本字段的宽度已减小。希望这有所帮助。如果出现问题，请告诉我。

          new Container(
              padding: EdgeInsets.only(left:10.0),
                decoration: BoxDecoration(

                    borderRadius: BorderRadius.all(Radius.circular(5.0)),
                    border: Border.all(color: Colors.blue)
                ),
                child: Row(
                  children: <Widget>[
                    Container(

                      child: CountryPickerDropdown(
                          initialValue: 'in',

                          itemBuilder: _buildDropdownItem,
                          onValuePicked: (Country country) {

                            isCountryCodeSelected=true;
                            print("${country.name}");
                            print("${country.phoneCode}");
                            print("${country.isoCode}");
                            print("+${country.phoneCode}(${country.isoCode})");
                            setState(() {
                              countryCode= country.phoneCode;
                            });
                          },
                        ),
                      width: MediaQuery.of(context).size.width/2-30.0,
                    ),
                    Container(
                      width: MediaQuery.of(context).size.width/2-30.0,
                      child: TextField(
                            keyboardType: TextInputType.phone,
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "Telephone Number",
                            ),

                            onChanged: (value){

                              setState(() {
                                phoneValue=value;
                              });

                              print("phoneNumbe:$phoneNo");
                              this.phoneNo = isCountryCodeSelected ? "+" + countryCode + value : "+91" + value ;
                              print("phoneNo="+phoneNo);

                            },

                        ),
                    ),

                  ],
                )
            )

包装已被行替换，文本字段的宽度已减小。希望这可以帮到您。如果有什么问题，请告诉我。

仍然出现重叠错误，而且在使用您的答案更改后，我的小部件以列形式显示。 - Shruti Ramnandan Sharma
1
再次编辑，将“Wrap”替换为“Row”，并调整“TextField”的大小。 - Aneesh Jose
嘿，它只适用于较大的屏幕，不适用于小屏幕。我仍然收到溢出错误。请查看链接：[1]: https://i.stack.imgur.com/nkvEg.jpg - Shruti Ramnandan Sharma
0

尝试使用这种方法...（在文本字段中，您可以添加您的电话号码，在橙色和青色的弹性框中，您可以添加您的国家选择器）

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            resizeToAvoidBottomPadding: false,
            body: SafeArea(
                child: Center(
                    child: Column(children: [
              Expanded(
                  flex: 25,
                  child: Column(children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: Colors.red,
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: Column(
                        children: [
                          Expanded(
                            flex: 1,
                            child: Container(
                              color: Colors.blue,
                            ),
                          ),
                          Expanded(
                              flex: 1,
                              child: Row(
                                children: [
                                  Expanded(
                                      flex: 1,
                                      child: Row(
                                        children: [
                                          Expanded(
                                            flex: 1,
                                            child: Container(
                                              color: Colors.orange,
                                            ),
                                          ),
                                          Expanded(
                                            flex: 1,
                                            child: Container(
                                              color: Colors.cyan,
                                            ),
                                          ),
                                        ],
                                      )),
                                  Expanded(
                                    flex: 1,
                                    child: TextField(
                                      style: TextStyle(color: Colors.black),
                                    ),
                                  ),
                                ],
                              )),
                          Expanded(
                            flex: 1,
                            child: Container(
                              color: Colors.blue,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: Colors.pink,
                      ),
                    )
                  ])),
              Expanded(
                flex: 3,
                child: Container(
                  color: Colors.blue,
                ),
              )
            ])))));
  }
}

In the text field you can add your phone no and in the orange and cyan color flex you can add your country picker

enter image description here

我没有听清楚你的意思，请按照我的代码编写。 - Shruti Ramnandan Sharma
-1
Expanded(
                          flex:1  
                          child: CountryPickerDropdown(
                            initialValue: 'in',

                            itemBuilder: _buildDropdownItem,
                            onValuePicked: (Country country) {

                              isCountryCodeSelected=true;
                              print("${country.name}");
                              print("${country.phoneCode}");
                              print("${country.isoCode}");
                              print("+${country.phoneCode}(${country.isoCode})");
                             setState(() {
                              countryCode= country.phoneCode;
                            });
                            },
                          ),
                        ),
                        Expanded(
                          flex:2
                          child: TextField(
                          keyboardType: TextInputType.phone,
                          decoration: InputDecoration(
                            border: InputBorder.none, 
                            hintText: "Telephone Number", 
                          ),

                          onChanged: (value){

                           setState(() {
                             phoneValue=value; 
                           });

                            print("phoneNumbe:$phoneNo");
                            this.phoneNo = isCountryCodeSelected ? "+" + countryCode + value : "+91" + value ;
                            print("phoneNo="+phoneNo);

                          },

                        ),)
更改后仍然无法正常工作，出现异常并且屏幕上没有任何显示。 - Shruti Ramnandan Sharma
抱歉，该异常并非由您的答案引起。但是，您的答案仍然不够有用。 - Shruti Ramnandan Sharma
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接