android - 如何解决 Flutter 中的 RenderFlex 溢出问题

Question

嗨，我是 Flutter 新手并尝试编写我的第一个应用程序，我该如何解决 RenderFlex 错误，我想显示将两个文本字段放入单独的容器中，我的第二个列表再次遇到这个问题。我还打算在列表中显示最新的项目，但实际上它仍然在底部导航层下并且没有完全显示。我的代码在这里，提前感谢您的指导

Widget build(BuildContext context) {
return Scaffold(
  resizeToAvoidBottomPadding: false,
  body: Column(
    children: <Widget>[
      Padding(
        padding:
        const EdgeInsets.only(top: 32, left: 16, right: 16),
        child: Row(
          children: <Widget>[
            Container(
                height: 45,
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      blurRadius: 10.0,
                      color: Colors.black.withOpacity(.1),
                      offset: Offset(3.0, 3.0),
                    ),
                  ],
                ),
                child: RaisedButton.icon(
                  onPressed: () {},
                  icon: Icon(Icons.arrow_drop_down_circle),
                  label: Text("انتخاب موقعیت"),
                  color: Color(0XffF1F2F3),
                  shape: RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(18.0),
                  ),
                )),
            SizedBox(
              width: 20,
            ),
            Container(
              height: 50,
              width: MediaQuery.of(context).size.width / 1.899,
              child: TextField(
                decoration: InputDecoration(
                    contentPadding: const EdgeInsets.only(top: 5),
                    hintText: "جستوجو آگهی ...",
                    prefixIcon: Icon(
                      Icons.search,
                      color: (Colors.grey),
                    ),
                    filled: true,
                    fillColor: Color(0XffF1F2F3),
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20),
                        borderSide: BorderSide.none)),
              ),
            )
          ],
        ),
      ),
      Container(
        height: 130,
        child: ListView.builder(
            itemCount: 10,
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(8),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(top: 8),
                      child: new Container(
                          width: 70,
                          height: 70,
                          decoration: new BoxDecoration(
                              boxShadow: [
                                BoxShadow(
                                  blurRadius: 8.0,
                                  color: Colors.black38
                                      .withOpacity(.5),
                                  offset: Offset(2.0, 2.0),
                                ),
                              ],
                              border: Border.all(
                                  width: 1,
                                  color: Colors.red,
                                  style: BorderStyle.solid),
                              gradient: LinearGradient(
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                  colors: [
                                    Colors.yellow,
                                    Colors.amber,
                                    Colors.orangeAccent,
                                    Colors.deepOrange,
                                    Colors.redAccent,
                                    Colors.red
                                  ]),
                              shape: BoxShape.circle,
                              image: new DecorationImage(
                                  image: new NetworkImage(
                                      "https://cdn0.iconfinder.com/data/icons/classic-cars-by-cemagraphics/512/camaro_512.png")))),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 8),
                      child: Text(
                        "خودرو",
                        style: TextStyle(
                            fontSize: 15, color: Colors.black87),
                      ),
                    ),
                  ],
                ),
              );
            }),
      ),
      SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: ListView.builder(
            itemCount: 10,
            scrollDirection: Axis.vertical,
            itemBuilder: (context, index) {
              return Padding(
                  padding: const EdgeInsets.only(
                      left: 8, right: 8, bottom: 12),
                  child: Container(
                    decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                          blurRadius: 9.0,
                          color: Colors.black54.withOpacity(.3),
                          offset: Offset(5.0, 5.0),
                        ),
                      ],
                      color: Color(0XffF3F3F4),
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(
                          width: 1,
                          color: Color(0XffF3F3F4),
                          style: BorderStyle.solid),
                    ),
                    child: Row(
                      children: <Widget>[
                        Container(
                            height: 200,
                            width: MediaQuery.of(context).size.width /
                                2.1,
                            decoration: new BoxDecoration(
                                shape: BoxShape.rectangle,
                                borderRadius: BorderRadius.only(
                                    topRight:
                                    const Radius.circular(10.0),
                                    bottomRight:
                                    const Radius.circular(10.0)),
                                image: new DecorationImage(
                                    fit: BoxFit.fill,
                                    image: new NetworkImage(
                                        "https://s101.divarcdn.com/static/pictures/1576001315/QXv36p38.jpg")))),
                        Column(
                          crossAxisAlignment:
                          CrossAxisAlignment.start,
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.only(
                                  top: 10,
                                  left: 8,
                                  right: 8,
                                  bottom: 60),
                              child: Text(
                                "سمند سفید مشابه صفر",
                                style: TextStyle(
                                    fontSize: 18,
                                    color: Colors.black),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(
                                "29000000 تومان",
                                style: TextStyle(
                                    fontSize: 15,
                                    color: Colors.black),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(
                                  right: 8,
                                  left: 8,
                                  top: 40,
                                  bottom: 10),
                              child: Row(
                                children: <Widget>[
                                  Text(
                                    "دقایقی پیش در شیراز",
                                    style: TextStyle(
                                        fontSize: 13,
                                        color: Colors.black),
                                  ),
                                  SizedBox(
                                    width: 20,
                                  ),
                                  Text(
                                    "خودرو",
                                    style: TextStyle(
                                        fontSize: 11,
                                        color: Colors.black),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        )
                      ],
                    ),
                  ));
            },
          ),
        ),
      ),
    ],
  ),
);

}

标签： androidflutterdart

Answer 1

您已经包装了Column导致异常的全部内容。列小部件不会滚动，并且由于您已经singlechildscrollview滚动内容，因此Column不会允许它。因此，要解决此问题，只需将您的整个正文内容包装ListView如下：

return Scaffold(
  resizeToAvoidBottomPadding: false,
  body: ListView(     //  use ListView instead of Column
    children: <Widget>[
      Padding(
        padding:
        const EdgeInsets.only(top: 32, left: 16, right: 16),
        child: Row(
        ...

结果：

希望这能回答你的问题。