8、button组件

Flutter提供了几种类型的按钮组件:

  • RaisedButton
  • FloatingActionButton
  • FlatButton IconButton
  • PopupMenuButton

下面用一段代码说明这几种按钮的用法:

main() {
  runApp(new MyApp());
}

enum WhyFarther { harder, smarter, selfStarter, tradingCharter }

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Test',
        home: new Scaffold(
            appBar: new AppBar(
                title: new Text('Test')
            ),
            body: new Column(
              children: <Widget>[
                new RaisedButton(
                  child: new Text("Raised Button"),
                  onPressed: (){},
                ),
                new FloatingActionButton(
                  child: new Icon(Icons.add),
                  onPressed: (){},
                ),
                new FlatButton(
                    onPressed: (){},
                    child: new Text("Flat Button")
                ),
                new IconButton(
                    icon: new Icon(Icons.list),
                    onPressed: (){}
                ),
                new PopupMenuButton<WhyFarther>(
                  onSelected: (WhyFarther result) {},
                  itemBuilder: (BuildContext context) => <PopupMenuEntry<WhyFarther>>[
                    const PopupMenuItem<WhyFarther>(
                      value: WhyFarther.harder,
                      child: const Text('Working a lot harder'),
                    ),
                    const PopupMenuItem<WhyFarther>(
                      value: WhyFarther.smarter,
                      child: const Text('Being a lot smarter'),
                    ),
                    const PopupMenuItem<WhyFarther>(
                      value: WhyFarther.selfStarter,
                      child: const Text('Being a self-starter'),
                    ),
                    const PopupMenuItem<WhyFarther>(
                      value: WhyFarther.tradingCharter,
                      child: const Text('Placed in charge of trading charter'),
                    ),
                  ],
                )
              ],
            )
        )
    );
  }
}
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容