flutter button RaisedButton(已经弃用改用ElevatedButton)组件
1.普通button
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = 'Gesture Demo'; return new MaterialApp( title: title, home: new MyHomePage(title: title), ); } } class MyHomePage extends StatelessWidget { final String title; MyHomePage({Key key, this.title}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: new Center(child: new MyButton()), ); } } class MyButton extends StatelessWidget { @override Widget build(BuildContext context) { // Our GestureDetector wraps our button return GestureDetector( // When the child is tapped, show a snackbar onTap: () { final snackBar = new SnackBar(content: new Text("Tap")); Scaffold.of(context).showSnackBar(snackBar); }, // Our Custom Button! child: Container( padding: EdgeInsets.all(12.0), decoration: BoxDecoration( color: Theme.of(context).buttonColor, borderRadius: BorderRadius.circular(8.0), ), child: new Text('My Buttons'), ), ); } }
RaisedButton组件 RaisedButton(已经弃用改用ElevatedButton)组件
import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( title: 'Flutter gesture', home: LearnListView(), )); } class LearnListView extends StatefulWidget{ @override State<StatefulWidget> createState() { return new _LearnListView(); } } class _LearnListView extends State<StatefulWidget>{ @override Widget build(BuildContext context) { return new MaterialApp( title: 'RaisedButton Demo', home: new Scaffold( appBar: AppBar( title: new Text('SingleChildScrollView Demo'), ), body: Container( padding: EdgeInsets.all(10.0), child: Column( children: <Widget>[ RaisedButton( onPressed: () {}, child: Text("textColor文本的颜色,color背景颜色,highlightColor按钮按下的颜色"), textColor: Color(0xffff0000), color: Color(0xfff1f1f1), highlightColor: Color(0xff00ff00), ), RaisedButton( onPressed: () {}, child: Text("disabledTextColor禁用时文本颜色,disabledColor禁用时背景颜色"), disabledTextColor: Color(0xff999999), disabledColor: Color(0xffff0000), ), RaisedButton( onPressed: () {}, child: Text("splashColor水波的颜色,disabledColor禁用时背景颜色"), splashColor: Color(0xffff0000), ), RaisedButton( onPressed: () {}, child: Text("colorBrightness按钮主题高亮 Brightness.light"), colorBrightness: Brightness.light, ), RaisedButton( onPressed: () {}, child: Text("colorBrightness按钮主题高亮 Brightness.dark"), colorBrightness: Brightness.dark, ), Container( margin: EdgeInsets.only(top: 20.0), child: RaisedButton( onPressed: () {}, child: Text( "elevation按钮下面的阴影,highlightElevation高亮时候的阴影,disabledElevation按下的时候的阴影"), elevation: 5.0, ), ), Container( margin: EdgeInsets.only(top: 20.0), child: RaisedButton( onPressed: () {}, child: Text( "elevation按钮下面的阴影,highlightElevation高亮时候的阴影,disabledElevation按下的时候的阴影"), highlightElevation: 5, ), ), Container( margin: EdgeInsets.only(top: 20.0), child: RaisedButton( onPressed: () {}, child: Text( "elevation按钮下面的阴影,highlightElevation高亮时候的阴影,disabledElevation按下的时候的阴影"), disabledElevation: 5.0, ), ), RaisedButton( onPressed: () {}, child: Text( "onHighlightChanged 水波纹高亮变化回调,按下返回true,抬起返回false"), onHighlightChanged: (bool b) { print(b); }, ), RaisedButton( onPressed: () { print("点击了"); }, child: Text("onPressed点击事件"), ), ], ), ) ), ); } }
带水波纹效果喔
基于以下文档:
FlatButton、RaisedButton和OutlineButton已分别由TextButton、ElevatedButton和OutlinedButton取代。
ButtonTheme已由TextButtonTheme、ElevatedButtonTheme和OutlinedButtonTheme取代。
原始类别最终会被移除,请移转使用它们的程式码。flutter.dev/go/material-button-migration-guide中有新按钮和按钮主题类别的详细移转指南。