11.Flutter中的Wrap组件

wrap

看效果就知道这个wrap的作用了，文字忽略，背景忽略。。。，这个的作用就是其实我们本来的数据是一行的，

然后一行放不下，就放下面去了，就相当于自动换行那种感觉。

’

然后还有各种方向的，但是感觉看起来感觉还行的就这种，毕竟很多软件都用到了这样的

class Layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // RaisedButton
    return Container(
      height: 200,
      width: 400,
      color: Colors.deepOrangeAccent,
      child: Wrap(
        //填充满后会自动换行，扩展（所谓的牛布局）
        spacing: 10,
        runSpacing: 10,
        // direction: Axis.vertical, //方向变成垂直排列
        // runAlignment: WrapAlignment.end,
        // alignment: WrapAlignment.end,//右对齐
        children: [
          MyButton("斗罗大陆"),
          MyButton("斗破苍穹"),
          MyButton("霸道总裁爱上我"),
          MyButton("大主宰"),
          MyButton("武动乾坤"),
          MyButton("老婆粉了解一下"),
          MyButton("满级绿茶穿成小可怜"),
          MyButton("你微笑时很美"),
        ],
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  final String text;

  const MyButton(this.text, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ElevatedButton(
      //raisedButton被弃用了，用这个好像还行，帮助文档说的
      child: Text(
        //研究半天，自己搞会了这个按钮。。。
        this.text,
        style: TextStyle(),
      ),
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all(Colors.black),
        backgroundColor: MaterialStateProperty.all(Colors.white),
        side: MaterialStateProperty.all(
          BorderSide(
            width: 1.0,
            color: Colors.lightBlueAccent,
            style: BorderStyle.solid,
          ),
        ),
      ),
      onPressed: () {},
    );
  }
}

),
),
),
onPressed: () {},
);
}
}

因为很多组件被弃用了，所以得自己会看这些更新后的组件（我也不会，得摸索下，多看看源码，源码里面的注释非常的详细）