Flutter TextButton 填充

问题描述

在 Flutter 2.0 版本中，FlatButton 已替换为 TextButton。

因此，padding 属性不再直接可用，而是作为 ButtonStyle 属性使用。

我的问题是，由于它不再作为 EdgeInsets 提供，我该如何设置？

TextButton(
   style: new ButtonStyle(
     padding: ???,),//padding: const EdgeInsets.all(0),//NOT AVAILABLE
   child: Text("Support",style: Theme.of(context).textTheme.headline2),onpressed: () => {Navigator.pushNamed(context,SupportScreen().routeName)},

解决方法

这是我的 TextButton 代码

Container(
    child: TextButton(
    style: ButtonStyle(
        backgroundColor:
            MaterialStateProperty.all<Color>(Colors.green),padding: MaterialStateProperty.all<EdgeInsets>(
            EdgeInsets.all(10)),),child: Text(
        "Login",style: TextStyle(
        height: 1.0,fontSize: 30,color: Colors.white,onPressed: () => {print("login")},

参见我使用 TextButton Widget 的 style 属性来插入内边距和背景 对于两者我都使用了 MaterialStateProperty.all

,

你可以这样做，例如：

TextButton(
              onPressed: () {},child: Text('Hello World'),style: TextButton.styleFrom(
                padding: EdgeInsets.fromLTRB(10,10,10),primary: Colors.teal,

TextButton.styleFrom() 参考文档： https://api.flutter.dev/flutter/material/TextButton-class.html

使用新按钮的示例和玩法： https://www.woolha.com/tutorials/flutter-using-textbutton-widget-examples

,

您可以为 MaterialStates 设置不同的值：

class TextButtonPadding extends StatelessWidget {
  EdgeInsets _getPadding(Set<MaterialState> states) {
    const interactiveStates = <MaterialState>{
      MaterialState.pressed,MaterialState.hovered,};
    if (states.any(interactiveStates.contains)) {
      return EdgeInsets.all(30.0);
    }
    return EdgeInsets.zero;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: TextButton(
          style: ButtonStyle(
            padding: MaterialStateProperty.resolveWith(_getPadding),onPressed: () {},child: Text(
            'Text Button',);
  }
}

或者为所有 MaterialState 设置一个值：

class TextButtonPadding extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: TextButton(
          style: ButtonStyle(
            padding: MaterialStateProperty.all(
              EdgeInsets.all(30.0),);
  }
}

请参阅https://api.flutter.dev/flutter/material/MaterialStateProperty-class.html