Flutter 基础篇—，2024高级前端笔试总结

在Flutter中，创建自定义按钮通常涉及到使用InkWell或GestureDetector来处理点击事件，并使用Container、Padding、Align等控件来进行布局和样式设置。以下是创建一个简单自定义按钮的示例代码：

import 'package:flutter/material.dart';
 
class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onTap;
 
  const CustomButton({Key? key, required this.label, required this.onTap}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 24.0),
      child: InkWell(
        onTap: onTap,
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 32.0),
          decoration: BoxDecoration(
            color: Theme.of(context).primaryColor,
            borderRadius: BorderRadius.circular(4.0),
          ),
          child: Align(
            alignment: Alignment.center,
            child: Text(
              label,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomButton(
            label: 'Click Me',
            onTap: () {
              // Handle button tap event
              print('Button was tapped!');
            },
          ),
        ),
      ),
    );
  }
}

这段代码定义了一个CustomButton类，它接受一个标签和一个点击事件处理函数作为参数。它使用InkWell来响应点击，并通过构造函数提供灵活性。build方法创建了一个内部填充为InkWell的Padding控件，InkWell包裹着一个Container，后者进一步包裹有一个Text小部件。这个按钮可以在应用中重复使用，并可以通过传入不同的标签和事件处理函数来定制。