flutter 自定义组件

最新推荐文章于 2024-12-16 14:01:36 发布

原创最新推荐文章于 2024-12-16 14:01:36 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Flutter中创建自定义的RaisedButton组件，通过复用代码简化页面构建，提供了一个简单的实现示例，包括组件的样式配置和点击事件处理。

写了两天的flutter，发现控件样式很多，flutter资源很少，本文在于实用性，可以减少页面代码，复用代码

页面只需引用

 child: MyRaisedButton(onPress: onPressFirstBtn, text: "haha"),
    );
  }

  void onPressFirstBtn() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => WalkingPad()),
//                    TextPage()),
    );
  }




import 'package:flutter/material.dart';

class MyRaisedButton extends RaisedButton {
  @required
  VoidCallback onPress;
  String text = "";

  MyRaisedButton({this.onPress, this.text});

  @override
  // TODO: implement color
  Color get color => Colors.grey;

  @override
  // TODO: implement textColor
  Color get textColor => Colors.white;

  @override
  // TODO: implement child
  Widget get child => Text(
        text,
        style: TextStyle(fontSize: 20, color: Colors.white),
      );

  @override
  // TODO: implement textTheme
  ButtonTextTheme get textTheme => ButtonTextTheme.primary;

  @override
  // TODO: implement elevation
  double get elevation => 10;

  @override
  // TODO: implement disabledElevation
  double get disabledElevation => 10;

  @override
  // TODO: implement shape
  ShapeBorder get shape => StadiumBorder();

  @override
  // TODO: implement onPressed
  get onPressed => onPress;

//  @override
//  Widget build(BuildContext context) {
//    // TODO: implement build
//    return new Container(
//      child: new Column(
//        mainAxisAlignment: MainAxisAlignment.center,
//        children: <Widget>[
//          new FlatButton(
//            onPressed: onPress,
//            color: Colors.pink[100],
//            child: new Column(
//              children: <Widget>[
//                this.title,
//                this.icon
//              ],
//            ),
//          ),
//        ],
//      ),
//    );
//  }
}