Flutter常用button组件及自定义按钮组件

final text;@override} }这里,我们自定义的按钮组件就完成了。因为flutter更新也比较快,废弃的组件也比较多,如果特别喜欢使用用某种已废弃组件,那么可以通过这种方式来创建它。
摘要由CSDN通过智能技术生成

Flutter 里有很多的 Button 组件很多,常见的按钮组件有:ElevatedButton、TextButton、IconButton、OutlinedButton、ButtonBar、FloatingActionButton 等。

ElevatedButton(旧版本的RaisedButton) :凸起的按钮,其实就是 Material Design 风格的 Button,较RaisedButton,ElevatedButton会自带背景色
OutlinedButton(旧版本OutlineButton):线框按钮,默认有一个边框,不带阴影且背景透明.按下后,边框颜色会变亮、同时出现背景和阴影(通过side配置边框);
TextButton(旧版本FlatButton):文本按钮,默认背景透明并不带阴影.按下后,会有背景色
IconButton :图标按钮,是一个可点击的Icon,不包括文字,默认没有背景,点击后会出现背景,默认用于导航条;
ButtonBar:按钮组,可以默认实现一个按钮组,通过 children 属性可以传入多个 Button。

FloatingActionButton:浮动按钮,我们会单独拎出来演示

常用属性:

请添加图片描述
请添加图片描述
新增的三个Button组件:ElevatedButton,OutlinedButton,TextButton三者用法基本一致,所以三者基本只演示了ElevatedButton,想详细了解的可以看看这个博主的*Flutter的button的按钮ElevatedButton ,总结的非常详细

基本按钮组件及样式演示:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        actions: [IconButton(onPressed: () {
   }, icon: Icon(Icons.settings))],
      ),
      body: Column
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter中,可以通过自定义Widget来创建一个自定义的Tab组件。首先,我们可以创建一个自定义的Tab类,继承自StatefulWidget,并实现它的build方法。 ```dart class CustomTab extends StatefulWidget { final String title; final bool isSelected; final Function onTap; CustomTab({required this.title, required this.isSelected, required this.onTap}); @override _CustomTabState createState() => _CustomTabState(); } class _CustomTabState extends State<CustomTab> { @override Widget build(BuildContext context) { return GestureDetector( onTap: widget.onTap, child: Container( color: widget.isSelected ? Colors.blue : Colors.transparent, child: Text( widget.title, style: TextStyle( fontSize: 16, color: widget.isSelected ? Colors.white : Colors.black, ), ), ), ); } } ``` 在这个自定义Tab类中,我们需要传入三个参数:title(标签的标题),isSelected(标签是否被选中),onTap(点击标签的回调方法)。 接下来,我们可以在TabBar中使用这个自定义Tab组件。 ```dart class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Custom Tab'), ), body: Column( children: [ TabBar( controller: _tabController, tabs: [ CustomTab( title: 'Tab 1', isSelected: _tabController.index == 0, onTap: () { _tabController.animateTo(0); }, ), CustomTab( title: 'Tab 2', isSelected: _tabController.index == 1, onTap: () { _tabController.animateTo(1); }, ), CustomTab( title: 'Tab 3', isSelected: _tabController.index == 2, onTap: () { _tabController.animateTo(2); }, ), ], ), Expanded( child: TabBarView( controller: _tabController, children: [ Center(child: Text('Content 1')), Center(child: Text('Content 2')), Center(child: Text('Content 3')), ], ), ), ], ), ); } } ``` 在这个例子中,我们使用TabBar和TabBarView来显示标签和对应的内容。自定义的Tab组件被作为TabBar的child组件传入。TabBar接收一个TabController来管理标签的切换。每个自定义Tab组件通过传入isSelected参数来判断自身是否被选中,并通过onTap回调方法来触发点击事件并切换标签。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值