flutter点击按键切换图标

参考

final List<String> list = [
    "Eli's Poynt AC",
    "Eli's Poynt Home DC",
  ];

  bool isSettings = false;
    
ListView.builder(
              shrinkWrap: true,
              itemCount: list.length + 1,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: Container(
                    height: 112,
                    padding:
                        const EdgeInsets.symmetric(horizontal: 21, vertical: 16),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      color: constants.Colors.greyDark,
                    ),
                    child: Row(
                      children: [
                        SizedBox(
                          height: 80,
                          width: 80,
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(8),
                            child: Image.asset('assets/images/poynt.jpg'),
                          ),
                        ),
                        const SizedBox(width: 15),
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text(
                                list[index],
                                style: constants.Styles.normalHeavyTextStyleWhite,
                              ),
                              const SizedBox(height: 6),
                              const Text(
                                'Evan Gbirol St, 18',
                                style: constants.Styles.smallBookTextStyleWhite,
                              ),
                            ],
                          ),
                        ),
                        SvgPicture.asset(constants.Assets.poynt1),
                        const SizedBox(width: 20),
                        IconButton(
                          onPressed: () {
                            
                            setState(() {
                              isSettings = !isSettings;
                            });
                          },
                          icon: isSettings
                              ? SvgPicture.asset(constants.Assets.remove2)
                              : SvgPicture.asset(constants.Assets.threeDot),
                          padding: EdgeInsets.zero,
                          constraints: const BoxConstraints(),
                        ),
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter中实现侧边菜单(通常称为抽屉)的点击切换功能,你可以使用`Drawer` widget配合`Navigator`来管理页面导航。以下是一个简单的示例: ```dart // 引入必要的包 import 'package:flutter/material.dart'; // 创建一个简单的主屏幕 class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Home')), drawer: Drawer( child: ListView( children: [ ListTile( title: Text('Menu Item 1'), onTap: () { // 当点击第一个菜单项时,显示第二个屏幕 Navigator.push( context, MaterialPageRoute(builder: (context) => SecondScreen()), ); }, ), ListTile( title: Text('Menu Item 2'), onTap: () { // 同理,点击其他菜单项... Navigator.push( context, MaterialPageRoute(builder: (context) => ThirdScreen()), ); }, ), ], ), ), ); } } // 其他屏幕定义 class SecondScreen extends StatelessWidget { ... } class ThirdScreen extends StatelessWidget { ... } // 当在侧边菜单中选择新的选项时,当前的SecondScreen或ThirdScreen会被替换 ``` 当你点击侧边菜单的一个条目时,`onTap`回调会调用`Navigator.push`方法,从而将用户导航到另一个指定的屏幕。要实现从一个屏幕返回主屏幕的效果,可以在`AppBar`中添加一个`IconButton`,并设置其`onPressed`属性为`closeDrawer()`。 注意这只是一个基础示例,实际应用可能需要更复杂的逻辑,比如使用`BottomNavigationBar`替代`Scaffold`的抽屉,或者使用`SlideableDrawer`库提供更平滑的动画效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值