flutter 在TextButton中添加尾随图标?

iq0todco  于 2022-12-19  发布在  Flutter
关注(0)|答案(5)|浏览(246)

有没有办法给TextButton添加一个尾随图标?
下面是我的代码:

TextButton(
       child: Center(
         child: Text ('Dummy', style: GoogleFonts.openSans (
             color: Colors.white, fontWeight: FontWeight.w400,
             fontSize: 28),),
       ),
       onPressed: () {
         Navigator.push(
           context,
           MaterialPageRoute(builder: (context) => FourteenthRoute(),),);
       }
   ),
nwlls2ji

nwlls2ji1#

您可以简单地将TextButtonchild小部件与Row小部件结合使用。

TextButton(
            onPressed: () => {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => FourteenthRoute(),
                ),
              )
            },
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  "Dummy",
                  style: GoogleFonts.openSans(
                      color: Colors.white,
                      fontWeight: FontWeight.w400,
                      fontSize: 28),
                ),
                Icon(Icons.menu)
              ],
            ),
          ),
soat7uwm

soat7uwm2#

您可以使用TextButton.icon():)

h43kikqp

h43kikqp3#

试用此软件包:https://pub.dev/packages/styled_text

TextButton(
           child: Center(
             child: StyledText(
                text: 'Text with alarm <alarm/> icon.',
                tags: {
                       'alarm': StyledTextTagIcon(Icons.alarm),
               },
              ),
           ),
           onPressed: () {
             Navigator.push(
               context,
               MaterialPageRoute(builder: (context) => FourteenthRoute(),),);
           }
       ),

jdg4fx2g

jdg4fx2g4#

TextButton还不支持尾随图标。但是您可以通过稍微修改源代码来创建自定义TextButton。请参见https://github.com/flutter/flutter/blob/18116933e7/packages/flutter/lib/src/material/text_button.dart#L153
下面是一个带有尾随图标的自定义TextButtoncustom_text_button.dart):

import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'dart:ui' show lerpDouble;

class CustomTextButton extends TextButton {
  factory CustomTextButton.icon({
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool? autofocus,
    Clip? clipBehavior,
    required Widget icon,
    required Widget label,
    Widget? trailing,
  }) = CustomTextButton;

  CustomTextButton({
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool? autofocus,
    Clip? clipBehavior,
    required Widget icon,
    required Widget label,
    Widget? trailing,
  })  : assert(icon != null),
        assert(label != null),
        super(
        key: key,
        onPressed: onPressed,
        onLongPress: onLongPress,
        style: style,
        focusNode: focusNode,
        autofocus: autofocus ?? false,
        clipBehavior: clipBehavior ?? Clip.none,
        child: _TextButtonWithIconChild(icon: icon, label: label, trailing:trailing),
      );

  @override
  ButtonStyle defaultStyleOf(BuildContext context) {
    final EdgeInsetsGeometry scaledPadding = ButtonStyleButton.scaledPadding(
      const EdgeInsets.all(8),
      const EdgeInsets.symmetric(horizontal: 4),
      const EdgeInsets.symmetric(horizontal: 4),
      MediaQuery.maybeOf(context)?.textScaleFactor ?? 1,
    );
    return super.defaultStyleOf(context).copyWith(
      padding: MaterialStateProperty.all<EdgeInsetsGeometry>(scaledPadding),
    );
  }
}

class _TextButtonWithIconChild extends StatelessWidget {
  const _TextButtonWithIconChild({
    Key? key,
    required this.label,
    required this.icon,
    this.trailing,
  }) : super(key: key);

  final Widget label;
  final Widget icon;
  final Widget? trailing;

  @override
  Widget build(BuildContext context) {
    final double scale = MediaQuery.maybeOf(context)?.textScaleFactor ?? 1;
    final double gap =
    scale <= 1 ? 8 : lerpDouble(8, 4, math.min(scale - 1, 1))!;
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        icon,
        SizedBox(width: gap),
        Flexible(child: label),
        if (trailing != null) SizedBox(width: gap),
        if (trailing != null) trailing!,
      ],
    );
  }
}

样品main

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CustomTextButton.icon(
              icon: Icon(Icons.camera),
              label: Text('Take A Photo'),
              trailing: Icon(Icons.edit),
              onPressed: () {},
            )
          ],
        ),
      ),
    );
  }
}

结果:

eqzww0vc

eqzww0vc5#

您可以简单地交换标签图标,如下所示。

TextButton.icon(
              onPressed: () {},
              label: const Icon(Icons.expand_more),
              icon: const Text('View documents'))

相关问题