Flutter按钮与交互 #

ElevatedButton(
  onPressed: () {
    print('Button pressed');
  },
  child: Text('Elevated Button'),
)

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
    elevation: 4,
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('Styled Button'),
)

ElevatedButton(
  onPressed: null,
  style: ElevatedButton.styleFrom(
    disabledBackgroundColor: Colors.grey.shade300,
    disabledForegroundColor: Colors.grey,
  ),
  child: Text('Disabled'),
)

ElevatedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.add),
  label: Text('Add'),
)

TextButton(
  onPressed: () {
    print('TextButton pressed');
  },
  child: Text('Text Button'),
)

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    foregroundColor: Colors.blue,
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('Styled TextButton'),
)

TextButton.icon(
  onPressed: () {},
  icon: Icon(Icons.edit),
  label: Text('Edit'),
)

OutlinedButton(
  onPressed: () {
    print('OutlinedButton pressed');
  },
  child: Text('Outlined Button'),
)

OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    foregroundColor: Colors.blue,
    side: BorderSide(color: Colors.blue, width: 2),
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('Styled Outlined'),
)

OutlinedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.share),
  label: Text('Share'),
)

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {
    print('IconButton pressed');
  },
)

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {},
  iconSize: 32,
  color: Colors.red,
  splashRadius: 24,
  tooltip: 'Add to favorites',
)

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    shape: BoxShape.circle,
  ),
  child: IconButton(
    icon: Icon(Icons.add, color: Colors.white),
    onPressed: () {},
  ),
)

FloatingActionButton(
  onPressed: () {
    print('FAB pressed');
  },
  child: Icon(Icons.add),
)

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
  backgroundColor: Colors.blue,
  foregroundColor: Colors.white,
  elevation: 6,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
)

FloatingActionButton.extended(
  onPressed: () {},
  icon: Icon(Icons.edit),
  label: Text('Edit'),
  backgroundColor: Colors.blue,
)

FloatingActionButton.large(
  onPressed: () {},
  child: Icon(Icons.add),
)

FloatingActionButton.small(
  onPressed: () {},
  child: Icon(Icons.add),
)

String? selectedValue = 'Option 1';

DropdownButton<String>(
  value: selectedValue,
  items: ['Option 1', 'Option 2', 'Option 3']
      .map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      selectedValue = newValue;
    });
  },
)

PopupMenuButton<String>(
  icon: Icon(Icons.more_vert),
  onSelected: (String value) {
    print('Selected: $value');
  },
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem(value: 'edit', child: Text('Edit')),
      PopupMenuItem(value: 'delete', child: Text('Delete')),
      PopupMenuItem(value: 'share', child: Text('Share')),
    ];
  },
)

BackButton(
  color: Colors.black,
  onPressed: () {
    Navigator.pop(context);
  },
)

CloseButton(
  color: Colors.black,
  onPressed: () {
    Navigator.pop(context);
  },
)

class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback? onPressed;
  final Color? backgroundColor;
  final Color? textColor;
  final double borderRadius;
  final double? width;
  final double height;
  
  const CustomButton({
    super.key,
    required this.text,
    this.onPressed,
    this.backgroundColor,
    this.textColor,
    this.borderRadius = 8,
    this.width,
    this.height = 48,
  });
  
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      height: height,
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: backgroundColor ?? Theme.of(context).primaryColor,
          foregroundColor: textColor ?? Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(borderRadius),
          ),
        ),
        child: Text(text),
      ),
    );
  }
}

class GradientButton extends StatelessWidget {
  final String text;
  final VoidCallback? onPressed;
  final List<Color> colors;
  
  const GradientButton({
    super.key,
    required this.text,
    this.onPressed,
    this.colors = const [Colors.blue, Colors.purple],
  });
  
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: colors),
        borderRadius: BorderRadius.circular(8),
      ),
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.transparent,
          shadowColor: Colors.transparent,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        ),
        child: Text(
          text,
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

class LoadingButton extends StatefulWidget {
  final String text;
  final Future<void> Function()? onPressed;
  
  const LoadingButton({
    super.key,
    required this.text,
    this.onPressed,
  });
  
  @override
  State<LoadingButton> createState() => _LoadingButtonState();
}

class _LoadingButtonState extends State<LoadingButton> {
  bool _isLoading = false;
  
  Future<void> _handlePress() async {
    if (_isLoading || widget.onPressed == null) return;
    
    setState(() => _isLoading = true);
    
    try {
      await widget.onPressed!();
    } finally {
      if (mounted) {
        setState(() => _isLoading = false);
      }
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _isLoading ? null : _handlePress,
      child: _isLoading
          ? SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(
                strokeWidth: 2,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
              ),
            )
          : Text(widget.text),
    );
  }
}

ThemeData(
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.blue,
      foregroundColor: Colors.white,
      padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
    ),
  ),
  textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(
      foregroundColor: Colors.blue,
    ),
  ),
  outlinedButtonTheme: OutlinedButtonThemeData(
    style: OutlinedButton.styleFrom(
      foregroundColor: Colors.blue,
      side: BorderSide(color: Colors.blue),
    ),
  ),
)

ButtonStyle({
  MaterialStateProperty<TextStyle?>? textStyle,
  MaterialStateProperty<Color?>? backgroundColor,
  MaterialStateProperty<Color?>? foregroundColor,
  MaterialStateProperty<Color?>? overlayColor,
  MaterialStateProperty<Color?>? shadowColor,
  MaterialStateProperty<double?>? elevation,
  MaterialStateProperty<EdgeInsetsGeometry?>? padding,
  MaterialStateProperty<Size?>? minimumSize,
  MaterialStateProperty<Size?>? fixedSize,
  MaterialStateProperty<Size?>? maximumSize,
  MaterialStateProperty<BorderSide?>? side,
  MaterialStateProperty<OutlinedBorder?>? shape,
  MaterialStateProperty<MouseCursor?>? mouseCursor,
  VisualDensity? visualDensity,
  MaterialTapTargetSize? tapTargetSize,
  Duration? animationDuration,
  bool? enableFeedback,
  MaterialStateProperty<AlignmentGeometry?>? alignment,
  InteractiveInkFeatureFactory? splashFactory,
})

GestureDetector(
  onTap: () {
    print('Tapped');
  },
  onDoubleTap: () {
    print('Double tapped');
  },
  onLongPress: () {
    print('Long pressed');
  },
  onHorizontalDrag: (details) {
    print('Horizontal drag: ${details.delta}');
  },
  onVerticalDrag: (details) {
    print('Vertical drag: ${details.delta}');
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: Center(child: Text('Tap me')),
  ),
)

InkWell(
  onTap: () {
    print('Tapped');
  },
  splashColor: Colors.blue.withOpacity(0.3),
  highlightColor: Colors.blue.withOpacity(0.1),
  borderRadius: BorderRadius.circular(8),
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('InkWell'),
  ),
)

InkResponse(
  onTap: () {
    print('Tapped');
  },
  splashColor: Colors.blue,
  highlightColor: Colors.blue.withOpacity(0.3),
  radius: 50,
  child: Icon(Icons.favorite, size: 32),
)