您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-10(页面布局 Wrap 组件)

2020-04-30【Flutter】1288人已围观

简介## 一、Flutter RaisedButton 定义一个按钮 `Flutter` 中通过 `RaisedButton` 定义一个按钮。`RaisedButton` 里面有很多的参数，这一讲我们只是简单的进行使用。 ![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302230856.png) ``` return RaisedButton( child: Text('女装'), textCo

## 一、Flutter RaisedButton 定义一个按钮

`Flutter` 中通过 `RaisedButton` 定义一个按钮。`RaisedButton` 里面有很多的参数，这一讲我们只
是简单的进行使用。

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302230856.png)

```
return RaisedButton(
    child: Text('女装'),
    textColor: Theme.of(context).accentColor,
    onPressed: (){},
);
```

## 二、Wrap 组件

`Wrap` 可以实现流布局，单行的 `Wrap` 跟 `Row` 表现几乎一致，单列的 `Wrap` 则跟 `Row` 表现几乎一致。但 `Row` 与 `Column` 都是单行单列的，`Wrap` 则突破了这个限制，`mainAxis` 上空间不足时，则向 `crossAxis` 上去扩展显示。

属性 | 说明
---|---
direction | 主轴的方向，默认水平
alignment | 主轴的对其方式
spacing | 主轴方向上的间距
textDirection | 文本方向
verticalDirection | 定义了 children 摆放顺序，默认是 down，见Flex 相关属性介绍。
runAlignment | run 的对齐方式。run 可以理解为新的行或者列，如果是水平方向布局的话，run 可以理解为新的一行
runSpacing | run 的间距

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302232334.png)

```
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      children: <Widget>[
        MyButton("第1集"),
        MyButton("第2集"),
        MyButton("第3集"),
        MyButton("第4集"),
        MyButton("第5集"),
        MyButton("第 6 集第 6 集"),
        MyButton("第7集"),
        MyButton("第8集"),
        MyButton("第9集"),
        MyButton("第10集第10集"),
        MyButton("第11集"),
        MyButton("第3集"),
        MyButton("第4集"),
        MyButton("第5集"),
        MyButton("第6集"),
        MyButton("第7集"),
        MyButton("第8集"),
        MyButton("第9集"),
        MyButton("第10集"),
        MyButton("第11集"),
      ],
    );
  }
}

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 RaisedButton(
        child: Text(this.text),
        textColor: Theme.of(context).accentColor,
        onPressed: () {});
  }
}

```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-09(AspectRatio 、Card 卡片组件)

下一篇：flutter-11(StatefulWidget 件有状态组件、页面上绑定数据、改变页面数据)