机遇屋-flutter开发中的几种按钮

flutter开发中的几种按钮

作者：ych

### 几种按钮

![](https://img.jiyuwu.com/upload/article/2023/1/5B08705E8CD94C74ABE5FFA4F0BEEC50.png)

```
class ButtonDemo extends StatelessWidget {
   const ButtonDemo({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(onPressed: (){}, child:const Text("悬浮按钮"),),
        TextButton(onPressed: (){}, child:const Text("扁平按钮"),),
        TextButton.icon(onPressed: (){}, icon:const Icon(Icons.add,color: Colors.white,),
          label: const Text("data",style: TextStyle(color: Colors.white),),
          style: TextButton.styleFrom(backgroundColor: Colors.green,
        ),),
        OutlinedButton(onPressed: (){}, child: const Text("轮廓按钮"),),
      ],
    );
  }
}
```

### 按钮错误处理
```
RaisedButton使用报错The methods 'RaisedButton' isn't defined
```

#### 原因
RaisedButton 现已弃用，取而代之的是 ElevatedButton。根据文档：

FlatButton、raisedButton 和 OutlineButton 已分别被 TextButton、[ElevatedButton](https://api.flutter.dev/flutter/material/ElevatedButton-class.html "ElevatedButton") 和 [OutlinedButton](https://api.flutter.dev/flutter/material/TextButton-class.html "OutlinedButton") 取代。ButtonTheme 已被 TextButtonTheme、[ElevatedButtonTheme](https://api.flutter.dev/flutter/material/ElevatedButtonTheme-class.html "ElevatedButtonTheme") 和 [OutlinedButtonTheme](https://api.flutter.dev/flutter/material/TextButtonTheme-class.html "OutlinedButtonTheme") 取代。原始类最终将被删除，请迁移使用它们的代码。flutter.dev/go/material-button-migration-guide 中提供了有关新按钮和按钮主题类的详细迁移指南。

#### 迁移示例
```
RaisedButton(
  color: Colors.red, // background
  textColor: Colors.white, // foreground
  onPressed: () { },
  child: Text('RaisedButton with custom foreground/background'),
)

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.red, // background
    onPrimary: Colors.white, // foreground
  ),
  onPressed: () { },
  child: Text('ElevatedButton with custom foreground/background'),
)

```

评论区

先去登录

flutter开发中的几种按钮

相关推荐

评论区