如何处理与所有设备兼容的Flutter小部件尺寸？

Question

[这里我带两个小部件，一个是文本字段小部件，另一个是图标小部件，它们都放在单独的容器中。我对扑打非常陌生，我不知道如何将两个大小不同的小部件彼此平行放置。但是为我的手机设计了某种方式，但是当我在不同的手机上运行我的应用程序时，它的小部件溢出了，有人可以帮我解决这个问题。提前致谢！！！有关更多参考，请参见给出的图像。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS81Q01QcS5qcGcifQ==” alt =“在此处输入图像描述”>

这是我的代码

Padding(
                padding: const EdgeInsets.only(
                    top: 10.0, bottom: 4.0, right: 20.0, left: 20.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Container(
                      child: Material(
                        color: Colors.white,
                        elevation: 3.0,
                        // CONTAINER BACKSIDE SHADOW DEPTH
                        borderRadius: BorderRadius.circular(5.0),
                        shadowColor: Color(0xFF90A4AE),
                        //CONTAINER BACKSIDE SHADOW COLOR
                        child: Expanded(
                          child: TextField(
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              prefixIcon: IconButton(
                                icon: Icon(
                                  Icons.search,
                                  color: Colors.pink,
                                ),
                                onPressed: () {},
                              ),

                              hintText: "Search for restaurant",
                              hintStyle: TextStyle(fontSize: 15),
                            ),
                            onChanged: (input) {
                              print(input);
                            },
                          ),
                        ),
                      ),
                      height: 55.0,
                      width: MediaQuery
                          .of(context)
                          .size
                          .width - 120,
                      decoration: BoxDecoration(
                        border: Border.all(
                            color: Colors.white,
                            width: 1.0,
                            style: BorderStyle.solid),
                        borderRadius: BorderRadius.circular(5.0),
                      ),
                    ),
                    Container(
                      child: Material(
                        color: Colors.white,
                        elevation: 3.0,
                        // CONTAINER BACKSIDE SHADOW DEPTH
                        borderRadius: BorderRadius.circular(5.0),
                        shadowColor: Color(
                            0xFF90A4AE),
                        child: IconButton(
                          icon: Icon(Icons.tune),
                          color: Colors.pink,
                          onPressed: () {
                           [enter image description here][1]
                          },
                        ), //CONTAINER BACKSIDE SHADOW COLOR
                      ),
                      height: 55.0,
                      width: MediaQuery
                          .of(context)
                          .size
                          .width - 300,
                      decoration: BoxDecoration(
                          border: Border.all(
                              color: Colors.white,
                              width: 1.0,
                              style: BorderStyle.solid),
                          borderRadius: BorderRadius.circular(5.0)),
                    )
                  ],
                ),
              ),

Answer 1

[从屏幕截图和代码中，我看到连续有两个小部件，并且由于无法容纳和显示两个小部件，因此屏幕溢出。

有两种解决方案：

• 如果溢出则自动在下一行显示行子项。
• 使行子项可逐行滚动。

注意：SMLink是我的自定义窗口小部件。只是用于演示目的。

SOLUTION-1

简单的解决方法是使用Wrap小部件而不是Row小部件。Wrap小部件仅将易于出现屏幕溢出的子级带入下一行。除了direction小部件可以提供的选项之外，您还可以设置spacing，Row等。试试吧，让我知道。

// By default, it behaves as Row, you can set the direction attribute to Axi.vertical to mimic the Column widget.
Wrap(
      spacing: 8.0,
      runAlignment: WrapAlignment.center,
      crossAxisAlignment: WrapCrossAlignment.center,
      alignment: WrapAlignment.center,
      children:
            [
              SMLink(logo: 'Medium', link: Constants.LINK_MEDIUM),
              SMLink(logo: 'linkedin', link: Constants.LINK_LINKEDIN),
              SMLink(logo: 'facebook', link: Constants.LINK_FAEBOOK),
              SMLink(logo: 'Qwiklabs', link: Constants.LINK_QWIKLABS),
            ],
    )

SOLUTION-2

从屏幕截图中，另一种解决方法是使行可滚动。这使UI在您的情况下看起来保持一致。我们可以为此使用ListView小部件。

ListView(
    scrollDirection: Axis.horizontal,
    children:
        [
              SMLink(logo: 'Medium', link: Constants.LINK_MEDIUM),
              SMLink(logo: 'linkedin', link: Constants.LINK_LINKEDIN),
              SMLink(logo: 'facebook', link: Constants.LINK_FAEBOOK),
              SMLink(logo: 'Qwiklabs', link: Constants.LINK_QWIKLABS),
        ],
)