抢购布局

实现效果

 

 //注意 text只有在contain里面才会自动换行
    //如果一个row里面有了一个expanded，那么expanded再嵌套的expended就不能使用了，也就是不在是match的意思，而是0了
    return
        new  Container(
          margin: EdgeInsets.only(left: 10, top: 0, bottom: 10, right: 10),
          padding: EdgeInsets.all(10),
          color: Colors.white,
          child:
              new Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Padding(
                      padding: EdgeInsets.only(right: 10),
                      child: new Image.asset(
                        "image/apk_install.png",
                        width: 80,
                        height: 80,
                        fit: BoxFit.fill,
                      )),
              new Expanded(child:     new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Container(
                    child: new Text(allData[index].name),
                  ),
                  new Row(
                    children: <Widget>[
                      new Container(
                        padding: EdgeInsets.all(4),
                        child: new Text("自营"),
                        color: Colors.red,
                      ),
                      new Text("爆品直销")
                    ],
                  ),
                  new Container(
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: <Widget>[
                        new Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            new Row(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              textBaseline: TextBaseline.alphabetic,
                              children: <Widget>[
                                new Text(
                                  "￥68",
                                  style: new TextStyle(
                                      fontSize: 30, color: Colors.red),
                                ),
                                new Text(
                                  "￥99",
                                  style: new TextStyle(
                                      fontSize: 14, color: Colors.grey),
                                )
                              ],
                            ),
                            new Text(
                              "猪肉专卖店",
                              style: new TextStyle(
                                  fontSize: 14, color: Colors.grey),
                            )
                          ],
                        ),
                        new Container(
                          padding: EdgeInsets.only(
                              left: 20, right: 20, top: 5, bottom: 5),
                          decoration: new BoxDecoration(
                            color: Colors.red,
                          ),
                          child: new Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              new Text("去抢个"),
                              new Stack(
                                children: <Widget>[
                                  new Container(
                                    width: 100,
                                    height: 5,
                                    decoration: new BoxDecoration(
                                      color: Colors.black,
                                    ),
                                  ),
                                  new Container(
                                    width: 50,
                                    height: 5,
                                    decoration: new BoxDecoration(
                                      color: Colors.white,
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),)

            ],
          ),
        )

   ;

完整代码

：

import 'package:flutter/material.dart';

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

class APP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      color: Colors.red,
      home: new APPView(),
    );
  }
}

class APPView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new APPViewState();
  }
}

class Model {
  String name;
  int progress;

  Model({String name, int progress}) {
    this.name = name ?? "默认名字";
    this.progress = progress ?? 0;
  }
}

class APPViewState extends State<APPView> {
  List<Model> allData;

  void initState() {
    super.initState();
    allData = new List();
    for (int i = 0; i < 8; i++) {
      String s = "萨达的控件我爱我的足够我的订单还有一抹爱钱，亮膜安全电视里的小仙女都没有我好看，好男人就是我，我就是石二苟";
      StringBuffer stringBuffer = new StringBuffer(s);
      for (int j = 0; j < i + 1; j++) {
        stringBuffer.write(s);
      }
      String result = stringBuffer.toString();
      Model model = new Model(name: result, progress: i * 10);
      allData.add(model);
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      backgroundColor: Colors.amberAccent,
      appBar: new AppBar(
        title: new Text("标题"),
      ),
      body: new ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return getItem(context, index);
        },
        itemCount: allData.length,
      ),
    );
  }

  Widget getItem(BuildContext context, int index) {
    //一样的
//    return new Container(
//      margin: EdgeInsets.only(left: 10, top: 0, bottom: 10, right: 10),
//      padding: EdgeInsets.all(10),
//      color: Colors.white,
//      child: new Row(
//        crossAxisAlignment: CrossAxisAlignment.start,
//        children: <Widget>[
//          new Image.asset(
//            "image/apk_install.png",
//            width: 80,
//            height: 80,
//            fit: BoxFit.fill,
//          ),
//          new SizedBox(
//            width: 10,
//          ),
//          new Expanded(
//            child: new Column(
//              crossAxisAlignment: CrossAxisAlignment.start,
//              children: <Widget>[
//                new Container(
//                  child: new Text(allData[index].name),
//                ),
//                new Row(
//                  children: <Widget>[
//                    new Container(
//                      padding: EdgeInsets.all(4),
//                      child: new Text("自营"),
//                      color: Colors.red,
//                    ),
//                    new Text("爆品直销")
//                  ],
//                ),
//                new Container(
//                  child: new Row(
//                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                    crossAxisAlignment: CrossAxisAlignment.end,
//                    children: <Widget>[
//                      new Column(
//                        crossAxisAlignment: CrossAxisAlignment.start,
//                        children: <Widget>[
//                          new Row(
//                            crossAxisAlignment: CrossAxisAlignment.end,
//                            textBaseline: TextBaseline.alphabetic,
//                            children: <Widget>[
//                              new Text(
//                                "￥68",
//                                style: new TextStyle(
//                                    fontSize: 30, color: Colors.red),
//                              ),
//                              new Text(
//                                "￥99",
//                                style: new TextStyle(
//                                    fontSize: 14, color: Colors.grey),
//                              )
//                            ],
//                          ),
//                          new Text(
//                            "猪肉专卖店",
//                            style:
//                                new TextStyle(fontSize: 14, color: Colors.grey),
//                          )
//                        ],
//                      ),
//                      new Container(
//                        padding: EdgeInsets.only(
//                            left: 20, right: 20, top: 5, bottom: 5),
//                        decoration: new BoxDecoration(
//                          color: Colors.red,
//                        ),
//                        child: new Column(
//                          crossAxisAlignment: CrossAxisAlignment.center,
//                          children: <Widget>[
//                            new Text("去抢个"),
//                            new Stack(
//                              children: <Widget>[
//                                new Container(
//                                  width: 100,
//                                  height: 5,
//                                  decoration: new BoxDecoration(
//                                    color: Colors.black,
//                                  ),
//                                ),
//                                new Container(
//                                  width: 50,
//                                  height: 5,
//                                  decoration: new BoxDecoration(
//                                    color: Colors.white,
//                                  ),
//                                )
//                              ],
//                            )
//                          ],
//                        ),
//                      )
//                    ],
//                  ),
//                ),
//              ],
//            ),
//          ),
//        ],
//      ),
//    );

    //可以用

    //注意 text只有在contain里面才会自动换行
    //如果一个row里面有了一个expanded，那么expanded再嵌套的expended就不能使用了，也就是不在是match的意思，而是0了
    return new Container(
      margin: EdgeInsets.only(left: 10, top: 0, bottom: 10, right: 10),
      padding: EdgeInsets.all(10),
      color: Colors.white,
      child: new Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Padding(
              padding: EdgeInsets.only(right: 10),
              child: new Image.asset(
                "image/apk_install.png",
                width: 80,
                height: 80,
                fit: BoxFit.fill,
              )),
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Container(
                  child: new Text(allData[index].name),
                ),
                new Row(
                  children: <Widget>[
                    new Container(
                      padding: EdgeInsets.all(4),
                      child: new Text("自营"),
                      color: Colors.red,
                    ),
                    new Text("爆品直销")
                  ],
                ),
                new Container(
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      new Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          new Row(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            textBaseline: TextBaseline.alphabetic,
                            children: <Widget>[
                              new Text(
                                "￥68",
                                style: new TextStyle(
                                    fontSize: 30, color: Colors.red),
                              ),
                              new Text(
                                "￥99",
                                style: new TextStyle(
                                    fontSize: 14, color: Colors.grey),
                              )
                            ],
                          ),
                          new Text(
                            "猪肉专卖店",
                            style:
                                new TextStyle(fontSize: 14, color: Colors.grey),
                          )
                        ],
                      ),
                      new Container(
                        padding: EdgeInsets.only(
                            left: 20, right: 20, top: 5, bottom: 5),
                        decoration: new BoxDecoration(
                          color: Colors.red,
                        ),
                        child: new Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            new Text("去抢个"),
                            new Stack(
                              children: <Widget>[
                                new Container(
                                  width: 100,
                                  height: 5,
                                  decoration: new BoxDecoration(
                                    color: Colors.black,
                                  ),
                                ),
                                new Container(
                                  width: 50,
                                  height: 5,
                                  decoration: new BoxDecoration(
                                    color: Colors.white,
                                  ),
                                )
                              ],
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}