Flutter-ListView溢出 [英] Flutter-ListView overflow

问题描述

颤音溢出小部件图片

我想设计一个小部件的ListView，每个小部件都有一个用于存储信息的容器.我尝试使用ListView，但是容器没有出现在屏幕上，所以我切换到Row，它们出现了，但是它们不能超过容器的最大宽度.您能建议如何管理图片中的ListView吗? 这是我的代码:

I want to design a ListView of widgets, each widget has a container which stores the information. I try to use ListView but the containers don't appear on the screen so I switched to Row, they appear but they cannot exceed the maximum width of the containers. Can you suggest how to manage a ListView in the picture? Here is My Code:

class NewsPage extends StatelessWidget {

@override
Widget build(BuildContext context) {

Widget buildButtonScore= Container(

  height: 100.0,
  width: 100.0,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0),color: Colors.white),
  child: FlatButton(
    padding: EdgeInsets.only(top: 20.0),
    child: Column( // Replace with a Row for horizontal icon + text
      children: <Widget>[
        IconButton(
            icon: Icon(Icons.add_circle_outline,size: 30.0,color: Colors.blue),
            onPressed: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => PointPage()
                  )
              );
            }
        ),
        Text("Đặt hàng",style: TextStyle(color: Colors.black),)
      ],
    ),
  ),
);
Widget buildButtonOrder= Container(
  height: 100.0,
  width: 100.0,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0),color: Colors.white),
  child: FlatButton(
    padding: EdgeInsets.only(top: 20.0),
    child: Column( // Replace with a Row for horizontal icon + text
      children: <Widget>[
        IconButton(
            icon: Icon(Icons.shopping_cart,size: 30.0,color: Colors.blue),
            onPressed: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => PointPage()
                  )
              );
            }
        ),
        Text("Đặt hàng",style: TextStyle(color: Colors.black),)
      ],
    ),
  ),
);
Widget buildButtonPurse = Container(
  height: 100.0,
  width: 100.0,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0),color: Colors.white),
  child: FlatButton(
    padding: EdgeInsets.only(top: 20.0),
    child: Column( // Replace with a Row for horizontal icon + text
      children: <Widget>[
        IconButton(
            icon: Icon(Icons.monetization_on,size: 30.0,color: Colors.blue),
            onPressed: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => PointPage()
                  )
              );
            }
        ),
        Text("Ví tiền",style: TextStyle(color: Colors.black),)
      ],
    ),
  ),
);
//Button Column
Widget buttonRow = Container(
  padding: const EdgeInsets.only(bottom: 10.0),
  margin: EdgeInsets.symmetric(vertical: 10.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      buildButtonScore,
      buildButtonOrder,
      buildButtonPurse,
    ],
  ),
);
//OFFERROW
Widget offer1 = Container(
  height: 150.0,
  width: 180.0,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0),color: Colors.white30),
  child: FlatButton(

    padding: EdgeInsets.only(top: 0.0),

    child: Column( 

      children: <Widget>[

        new Image.asset('images/Q.png',height: 90.0,fit: BoxFit.fitWidth,width: 180.0,),

        Text("Các cô gái đẹp đang chờ bạn đó!!!",style: TextStyle(color: Colors.black),)
      ],
    ),
  ),
);
Widget offer2 = Container(
  height: 150.0,
  width: 180.0,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0),color: Colors.white30),
  child: FlatButton(

    padding: EdgeInsets.only(top: 0.0),

    child: Column( // Replace with a Row for horizontal icon + text

      children: <Widget>[
        new Image.asset('images/Nina.gif',height: 90.0,fit:BoxFit.fitWidth,width: 180.0,),

        Text("Hãy nhanh tay sở hữu vé xem phim Goddess Kiss!",style: TextStyle(color: Colors.black),)
      ],
    ),
  ),
);
Widget offerRow = Row(
  //shrinkWrap: true,
  //scrollDirection: Axis.horizontal,
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Row(
      children: [
        offer1,
        VerticalDivider(),
        offer2,
      ],
    ),
  ],
);

Widget newsRow = Container(
  padding: EdgeInsets.only(top: 10.0),
  child: Container(
    color: Colors.transparent,
    margin: EdgeInsets.symmetric(vertical: 20.0),
    height: 125.0,
    child: ListView(
      scrollDirection: Axis.vertical,
      children: <Widget>[
        new NewsBody(),
      ],
    ),
  ),
);
// TODO: implement build
return Container(
  child: ListView(
    scrollDirection: Axis.vertical,
    children: <Widget>[
      buttonRow,

      new Text('Dành cho bạn',style: TextStyle( fontSize: 20.0, fontWeight: FontWeight.w400),),
      offerRow,

      new Text('Tin tức',style: TextStyle( fontSize: 20.0, fontWeight: FontWeight.w400),),
      newsRow,
    ],
  ),
);

}

}

我得到了错误:

Pic1

Pic2

Pic3

Pic4

Pic5

推荐答案

使用scrollDirection:Axis.horizo​​ntal将代码添加到SingleChildScrollView中，或替换为以下代码

Add your code inside SingleChildScrollView with scrollDirection: Axis.horizontal, or replace with below code

Widget offerRow = new SingleChildScrollView(scrollDirection: Axis.horizontal,
child: Row(
  //shrinkWrap: true,
  //scrollDirection: Axis.horizontal,
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Row(
      children: [
        offer1,
        VerticalDivider(),
        offer2,
      ],
    ),
  ],
),);

这篇关于Flutter-ListView溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！