flutter:自定义控件:按纽

一,代码:

按纽代码

import 'package:flutter/material.dart';

class MyButton extends StatelessWidget {
  final GestureTapCallback onPressed; //点击事件的回调,一旦设置后就不可变

  MyButton({required this.onPressed});

  ///sizeBox增加图片和文字的间距
  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      fillColor: Colors.deepOrange,
      splashColor: Colors.orange,
      padding: EdgeInsets.only(left: 20, right: 20),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.add, color: Colors.yellow),
          SizedBox(width: 10,),
          Text(
            "新增活动",
            style: TextStyle(color: Colors.white),
          )
        ],
      ),
      shape: StadiumBorder(),
      onPressed: onPressed,
    );
  }
}

调用自定义按钮

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mylist2/utils/functions.dart';
import 'package:mylist2/views/MyButton.dart';

import '../services/AuthService.dart';

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>  {
  var authServ = Get.find<AuthService>();

  void myclick() {
    print('按钮被点击过了');
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("home页面"),
      ),

      body: Center(
        child:Column(
          children:[
            MyButton(onPressed: myclick),
          ],
        ),
      ),

    );
  }

}

二,测试效果:

image

posted @ 2026-03-03 17:57  刘宏缔的架构森林  阅读(0)  评论(0)    收藏  举报