flutter在导航栏处实现对两个列表的点击事件

最新推荐文章于 2024-05-20 10:42:28 发布
最新推荐文章于 2024-05-20 10:42:28 发布
阅读量348 收藏
点赞数
分类专栏： 安卓 文章标签： flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44911775/article/details/126101045
版权

原理：通过Function实现index的回调
导航栏代码

import 'dart:async';
import 'dart:convert';
import 'dart:developer';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:oktoast/oktoast.dart';
import 'package:social_im/common/globalEventBus.dart';
import 'package:social_im/http/api.dart';
import 'package:social_im/http/rxhttp.dart';
import 'package:social_im/http/utils/NetUtils.dart';
import 'package:social_im/http/utils/response.dart';
import 'package:social_im/widget/loading_dialog.dart';
import '../../camera_picker/constants/constants.dart';
import '../../common/Global.dart';
import '../../common/colors.dart';
import '../../constant/dimens.dart';
import '../../http/net_callback.dart';
import '../../models/cloudCustomDataBean.dart';
import '../../utils/image_utile.dart';
import '../widget/myText.dart';
import 'MyDragBottle.dart';
import 'MyThrowBottle.dart';
import 'data/DriftBottleList.dart';
import '../../generated/l10n.dart';
import 'data/bottle_model.dart';
import 'dialog/chat_dialog.dart';

//我的瓶子导航栏
class MyBottleNav extends StatefulWidget {
  const MyBottleNav({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => MyBottleNavState();
}

class MyBottleNavState extends State<MyBottleNav>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  List<Chose> tabs = [];
  int currentIndex = 0;
  String inputCotent = '';
  List<AssetEntity> assetss = [];
  bool isScreening = false;

  //取屏幕最大宽度和高度
  final width = window.physicalSize.width;
  final height = window.physicalSize.height;
  DriftBottleList? driftBottleList;
  late StreamSubscription<OnCloseBottleRefresh> _onCloseBottleRefresh;

  @override
  void initState() {
    _getDriftBottleList();
    super.initState();
    tabs.add(Chose(title: S.current.bottle_thrown_bottles, position: 0));
    tabs.add(Chose(title: S.current.bottle_picked_bottles, position: 1));

    _tabController =
        TabController(length: tabs.length, vsync: this, initialIndex: 0);

    _tabController.addListener(() {
      if (_tabController.index.toDouble() == _tabController.animation!.value) {
        mySetState(() {
          currentIndex = _tabController.index;
        });
      }
    });

    _onCloseBottleRefresh = EventBusUtil.listen((event) {
      if (event.playType == CloudCustomDataBean.TYPE_DRIFT_BOTTLE) {
        _getDriftBottleList();
        if (mounted) {
          setState(() {});
        }
      }
    });
  }

  ///获取瓶子列表
  _getDriftBottleList() {
    showLoadingDialog();
    RxHttp<Response>()
      ..init()
      ..setBaseUrl(Api.BASE_API)
      ..setPath(Api.API_GET_DRIFT_BOTTLELIST)
      ..setCacheMode(CacheMode.FIRST_CACHE_THEN_REQUEST)
      ..setJsonTransFrom((p0) => Response.fromJson(json.decoder.convert(p0)))
      ..call(
          NetCallback(onNetFinish: (response) {
            dismissLoadingDialog();
            if (response.code == 200) {
              driftBottleList = DriftBottleList.fromJson(response.data);
            }
            if (mounted) {
              setState(() {});
            }
          }, onCacheFinish: (response) {
            if (response.code == 200) {
              driftBottleList = DriftBottleList.fromJson(response.data);
            }
            if (mounted) {
              setState(() {});
            }
          }, onNetError: (code) {
            dismissLoadingDialog();
            showToast('${S.current.network_error_tips}[$code]');
          }),
          server: Servers.microServices);
  }

  @override
  void dispose() {
    dismissLoadingDialog();
    _onCloseBottleRefresh.cancel();
    super.dispose();
  }

  mySetState(callBack) {
    if (mounted) {
      setState(() {
        callBack();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.dark,
        child: Scaffold(
            resizeToAvoidBottomInset: false,
            body: Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: ImageUtile.imageProvider(
                            'assets/images/bg_drift_my_bottle.png'),
                        fit: BoxFit.fill)),
                child: Column(children: [
                  addHeadView(),
                  Container(
                    color: Colors.transparent,
                    padding: const EdgeInsets.only(
                        bottom: 15, left: 8, right: 8, top: 27),
                    child: TabBar(
                        isScrollable: false,
                        indicatorWeight: 2.4,
                        indicatorSize: TabBarIndicatorSize.label,
                        indicatorColor: const Color(0xFF6EA6F5),
                        labelColor: const Color(0xFF6EA6F5),
                        labelStyle: const TextStyle(
                            fontSize: 18, fontWeight: FontWeight.w500),
                        labelPadding: const EdgeInsets.only(
                            left: 8, right: 8, bottom: 12),
                        unselectedLabelColor: const Color(0xFF1A1A1A),
                        unselectedLabelStyle: const TextStyle(
                            fontSize: 18, fontWeight: FontWeight.w500),
                        controller: _tabController,
                        tabs: tabs.map((chose) {
                          return Stack(
                            clipBehavior: Clip.none,
                            alignment: Alignment.topRight,
                            children: [
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(chose.title),
                                ],
                              ),
                              Positioned(
                                  right: -10,
                                  top: -10,
                                  child: showMessageNumView(chose.position == 0
                                      ? driftBottleList?.down_no_read_num ?? 0
                                      : driftBottleList?.up_no_read_num ?? 0))
                            ],
                          );
                        }).toList()),
                  ),
                  Expanded(
                      child: TabBarView(
                          controller: _tabController,
                          children: tabs.map((chose) {
                            switch (chose.position) {
                              case 0:
                                return MyThrowBottle(
                                  downList: driftBottleList?.downList ?? [],
                                  onItemClicked: (index) {
                                    showChatDialog(context, 2, index,
                                        chatDialogModel: ChatDialogModel(
                                            type: 0,
                                            bottleModel: driftBottleList
                                                    ?.downList![index] ??
                                                BottleModel()));
                                  },
                                );
                              case 1:
                                return MyDragBottle(
                                    upList: driftBottleList?.upList ?? [],
                                    onItemClicked: (index) {
                                      showChatDialog(context, 1, index,
                                          chatDialogModel: ChatDialogModel(
                                              type: 1,
                                              bottleModel: driftBottleList
                                                      ?.upList![index] ??
                                                  BottleModel()));
                                    });
                              default:
                                return Container();
                            }
                          }).toList()))
                ]))));
  }

  //头部按键
  Widget addHeadView() {
    return Container(
        padding: EdgeInsets.only(top: Global.topHeight + 10),
        color: Colors.transparent,
        child: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                  padding: const EdgeInsets.only(left: 16, right: 10),
                  child: ImageUtile.imageWidget(
                      'assets/images/icon_back@2x.png',
                      width: 24,
                      height: 24)),
              Text(S.current.bottle_my,
                  style: const TextStyle(
                      fontSize: Dimens.fontSize_16, color: Colors.black))
            ],
          ),
        ));
  }

  Widget showMessageNumView(messagesNum) {
    return Container(
        height: 18,
        child: messagesNum > 0
            ? PhysicalModel(
                color: Colors.transparent,
                borderRadius: BorderRadius.circular(9),
                clipBehavior: Clip.antiAlias,
                child: Container(
                    color: CommonColors.getColorFA6300,
                    padding: const EdgeInsets.fromLTRB(6, 1, 6, 1),
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          ContentCenterText(
                              messagesNum > 99 ? '99+' : messagesNum.toString(),
                              11.0,
                              Colors.white)
                        ])))
            : null);
  }
}

///选择对象model
class Chose {
  const Chose({required this.title, required this.position});

  final String title;
  final int position;
}

重点部分，为什么要整合点击事件在导航栏这里，因为好看，好理解，逻辑比较顺，全局上点击

Expanded(
                      child: TabBarView(
                          controller: _tabController,
                          children: tabs.map((chose) {
                            switch (chose.position) {
                              case 0:
                                return MyThrowBottle(//扔瓶子界面
                                  downList: driftBottleList?.downList ?? [],//第一个参数
                                  onItemClicked: (index) {//第二个参数
                                    showChatDialog(context, 2, index,
                                        chatDialogModel: ChatDialogModel(
                                            type: 0,
                                            bottleModel: driftBottleList
                                                    ?.downList![index] ??
                                                BottleModel()));//当点击item时弹出弹窗
                                  },
                                );
                              case 1:
                                return MyDragBottle(//捞瓶子界面
                                    upList: driftBottleList?.upList ?? [],
                                    onItemClicked: (index) {
                                      showChatDialog(context, 1, index,
                                          chatDialogModel: ChatDialogModel(
                                              type: 1,
                                              bottleModel: driftBottleList
                                                      ?.upList![index] ??
                                                  BottleModel()));
                                    });
                              default:
                                return Container();
                            }
                          }).toList()))

捞瓶子代码

import 'dart:ui';

import 'package:flutter/material.dart';

import '../../common/colors.dart';
import '../../generated/l10n.dart';
import '../../utils/date_util.dart';
import '../widget/myText.dart';
import '../widget/splitLine.dart';
import 'data/bottle_model.dart';

//捡的瓶子
class MyDragBottle extends StatefulWidget {
  final List<BottleModel> upList;
  final Function(int index)? onItemClicked;

  const MyDragBottle({Key? key, required this.upList, this.onItemClicked})
      : super(key: key);

  @override
  State<StatefulWidget> createState() => MyDragBottleState();
}

class MyDragBottleState extends State<MyDragBottle> {
  //取屏幕最大宽度和高度
  final width = window.physicalSize.width;
  final height = window.physicalSize.height;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  Widget showMessageNumView(messagesNum) {
    return Container(
        height: 18,
        child: messagesNum > 0
            ? PhysicalModel(
                color: Colors.transparent,
                borderRadius: BorderRadius.circular(9),
                clipBehavior: Clip.antiAlias,
                child: Container(
                    color: CommonColors.getColorFA6300,
                    padding: const EdgeInsets.fromLTRB(6, 1, 6, 1),
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          ContentCenterText(
                              messagesNum > 99 ? '99+' : messagesNum.toString(),
                              11.0,
                              Colors.white)
                        ])))
            : null);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.transparent,
      home: widget.upList.isEmpty?Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            alignment: Alignment.center,
            child: Container(
                margin: const EdgeInsets.only(bottom: 120),
                child: Column(children: [
                  ContentText(S.current.bottle_no_data, 14.0,
                      CommonColors.getTextWeakColor()),
                  TopPadding(30),
                ])),
          )
        ],
      ):Scaffold(
        backgroundColor: Colors.transparent,
        body: Container(
          color: Colors.transparent,
          child: MediaQuery.removePadding(
              removeTop: true,
              context: context,
              child: widget.upList.isEmpty
                  ? Container()
                  : ListView.builder(
                      shrinkWrap: true,
                      itemCount: widget.upList.length,
                      itemBuilder: (BuildContext context, int index) {
                        BottleModel upList = widget.upList[index];
                        return GestureDetector(
                          onTap: () {
                            if (widget.onItemClicked != null) {
                              widget.onItemClicked!(index);
                            }
                          },
                          child: Stack(
                            alignment: Alignment.topRight,
                            children: [
                              if (index % 3 == 0)
                                Container(
                                  width: width,
                                  margin: const EdgeInsets.only(
                                      top: 16, left: 16, right: 16),
                                  padding: const EdgeInsets.only(
                                      left: 16, top: 16, bottom: 8, right: 16),
                                  decoration: BoxDecoration(
                                    color: const Color(0xFFF8F9FF),
                                    borderRadius: BorderRadius.circular(12),
                                    boxShadow: const [
                                      BoxShadow(
                                        color: Color(0xFFBCC0EE),
                                        blurRadius: 1,
                                      ),
                                    ],
                                  ),
                                  child: Column(
                                    mainAxisSize: MainAxisSize.max,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        upList.text!,
                                        style: const TextStyle(
                                            color: Color(0xFF333333),
                                            fontSize: 18),
                                      ),
                                      Container(
                                        margin: const EdgeInsets.only(top: 8),
                                        child: Text(
                                          DateUtil.formatDateMs(
                                              upList.downTime! * 1000,
                                              format: 'yyyy.MM.dd'),
                                          style: const TextStyle(
                                              color: Color(0xFF999999),
                                              fontSize: 12),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              if (index % 3 == 1)
                                Container(
                                  width: width,
                                  margin: const EdgeInsets.only(
                                      top: 16, left: 16, right: 16),
                                  padding: const EdgeInsets.only(
                                      left: 16, top: 16, bottom: 8, right: 16),
                                  decoration: BoxDecoration(
                                    color: const Color(0xFFEDFAFF),
                                    borderRadius: BorderRadius.circular(12),
                                    boxShadow: const [
                                      BoxShadow(
                                        color: Color(0xFFBCE2F1),
                                        blurRadius: 1,
                                      ),
                                    ],
                                  ),
                                  child: Column(
                                    mainAxisSize: MainAxisSize.max,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        upList.text!,
                                        style: const TextStyle(
                                            color: Color(0xFF333333),
                                            fontSize: 18),
                                      ),
                                      Container(
                                        margin: const EdgeInsets.only(top: 8),
                                        child: Text(
                                          DateUtil.formatDateMs(
                                              upList.downTime! * 1000,
                                              format: 'yyyy.MM.dd'),
                                          style: const TextStyle(
                                              color: Color(0xFF999999),
                                              fontSize: 12),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              if (index % 3 == 2)
                                Container(
                                  width: width,
                                  margin: const EdgeInsets.only(
                                      top: 16, left: 16, right: 16),
                                  padding: const EdgeInsets.only(
                                      left: 16, top: 16, bottom: 8, right: 16),
                                  decoration: BoxDecoration(
                                    color: const Color(0xFFFBFFF2),
                                    borderRadius: BorderRadius.circular(12),
                                    boxShadow: const [
                                      BoxShadow(
                                        color: Color(0xFFDBEBB6),
                                        blurRadius: 1,
                                      ),
                                    ],
                                  ),
                                  child: Column(
                                    mainAxisSize: MainAxisSize.max,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        upList.text!,
                                        style: const TextStyle(
                                            color: Color(0xFF333333),
                                            fontSize: 18),
                                      ),
                                      Container(
                                        margin: const EdgeInsets.only(top: 8),
                                        child: Text(
                                          DateUtil.formatDateMs(
                                              upList.downTime! * 1000,
                                              format: 'yyyy.MM.dd'),
                                          style: const TextStyle(
                                              color: Color(0xFF999999),
                                              fontSize: 12),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              Positioned(
                                top: 7,
                                right: 15,
                                child: showMessageNumView(upList.noReadNum),
                              )
                            ],
                          ),
                        );
                      })),
        ),
      ),
    );
  }
}

回调的重点代码

class MyDragBottle extends StatefulWidget {
  final List<BottleModel> upList;
  final Function(int index)? onItemClicked;//定义一个可回调的对象，里面带一个参数，回调这个参数

  const MyDragBottle({Key? key, required this.upList, this.onItemClicked})
      : super(key: key);

  @override
  State<StatefulWidget> createState() => MyDragBottleState();
}


ListView.builder(
                      shrinkWrap: true,
                      itemCount: widget.upList.length,
                      itemBuilder: (BuildContext context, int index) {
                        BottleModel upList = widget.upList[index];
                        return GestureDetector(
                          onTap: () {
                            if (widget.onItemClicked != null) {
                              widget.onItemClicked!(index);//当点击该item时回调该index给导航栏
                            }
                          },
氤氲息
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter Listview点击事件和长按事件实现
xq610928的博客
06-30 7288
前言： 在Android  和iOS  常用APP经常有listview列表组件 展示数据  以及点击事件和长按事件的处理  今天我们来讲下flutter里面的子元素item的点击事件和长按事件 效果图： 1准备工作 需要用到的三方库 toast: ^0.1.5   在pubspec.yaml文件中添加依赖   然后在控制台敲 flutter   pub  get  来下载依赖&nb
Flutter 自定义顶部导航栏（方法一）
01-20
在Flutter开发中，自定义顶部导航栏是提升应用界面独特性和用户体验的重要手段。在这个示例中，我们将讨论如何使用Flutter的Material库中的组件来创建一个自定义的顶部导航栏，也就是AppBar。首先，我们来看看提供的...
正确使用Flutter的Listview
平头哥
02-20 1224
Flutter不提供 ListView的Adapter，那只能造一个了；
Flutter 给Row Container Column Text设置点击事件
最新发布
qq_59625204的博客
05-20 128
Row Container Column可以使用InkWell。不同点是InkWell具有点击效果可以自己设置点击的颜色等。也可以GestureDetector。
Flutter TabBar 自定义点击事件
丿灬安之若死
08-11 1478
class _BasePageState extends State<BasePage> with SingleTickerProviderStateMixin { var _tabList = ['甲方', '乙方', '预付', '后付', '筛选']; late TabController _tabController; 首先要使用 withSingleTickerProviderStateMixin 因为和这个tabcontroller的初始化有关系 ..
Flutter和Dart系列十一：Function（二）
xlh1191860939的博客
01-10 1802
我们在系列四中已经介绍了Dart中有关Function的基本概念，今天我们来围绕“函数作为一等公民，作为对象”这一概念来展开讨论和总结。 将一个函数赋值给一个变量. add(int a, int b) => a + b; void main() { var sum = add; print(sum(1, 2)); // 打印3 } 对于add函数，我们将其赋值给变量...
Flutter笔记（10）flutter中listview列表
向着太阳迎着光
07-29 764
listview概述 ListView无论是在Android（兼容了android中的ScrollView和ListView，可以当列表也可以充当滑动布局）和IOS开发中，使用的频率都是很高的，而且功能也是很强大。在Flutter中也不例外，也是一个非常常用的布局方式之一，在Flutter中ListView结合ListTile可以布局出一些复杂的列表界面。 ListView列表item-ListT......
flutter底部导航栏添加角标
01-20
在Flutter开发中，底部导航栏（Bottom Navigation Bar）是应用界面设计中常见的一种元素，用于在多个页面间切换。为了增强用户体验，有时我们需要在底部导航栏的图标上添加角标，来显示未读消息数量或其他状态提示。...
Flutter实现APP导航栏的几种方式
05-17
Flutter，作为Google推出的跨平台UI框架，提供了多种方式来实现导航栏。本篇文章将详细探讨如何使用Flutter中的`TabBar`、`TabBarView`、`TabController`以及`BottomNavigationBar`来构建应用程序的导航栏。 首先，...
Flutter实现底部导航
08-26
本篇文章将详细讲解如何在Flutter中实现底部导航栏。 首先，我们需要导入必要的包。在`main.dart`文件中，引入`material.dart`库，因为BottomNavigationBar是Material Design的一部分： ```dart import 'package:...
flutter导航栏动画资源
05-08
总之，实现"flutter导航栏动画资源"涉及到对Flutter的`Navigator`、动画组件和图片资源的深入理解和应用。通过精心设计和优化，开发者可以创造出既美观又流畅的导航栏动画，提升用户对应用的整体满意度。在实践中，...
Flutter学习之旅(六)----ListView控件自定义Adapter以及带参数跳转
07-30
Flutter学习之旅(六)----ListView控件自定义Adapter以及带参数跳转，博客对应地址：http://blog.csdn.net/zhangxiangliang2/article/details/76383244
Flutter 点击事件基础GestureDector,InkWell,Ink的使用
风吹草低见牛羊
05-09 2645
开发环境：Win 10 ，Android studio 3.4.0 目的：在使用过程中需要用到点击某一个Column，怎么实现？ 一、在网上找到最多的是InkWell,Ink去实现的单个Widget的点击事件，这里我就不多说了，在网上找了几张截图丢这里了[图见文章最下方]，本篇主要介绍怎么使用GestureDector去实现单个或一个Column的点击事件 二、GestureDector包裹widget实现widget的点击事件 代码1：Column点击事件 GestureDetector bu
flutter列表点击变色思路
python4_1的博客
08-11 1044
flutter 列表点击变色
flutter 列表下拉，顶部状态栏逐渐显示
weixin_44911775的博客
02-20 520
【代码】flutter 列表下拉，顶部状态栏逐渐显示。
Flutter中的触摸事件
Android_XG的博客
10-12 803
几乎每个应用程序都需要某种用户输入。通常，你的应用需要响应触摸事件。这是一个触摸事件的小指南，特别是对于启动Flutter开发人员。在手势识别和对触摸事件的反应方面，Flutter为新开发人员提供了令人难以置信的小部件。你可以使应用中的任何微件响应触摸事件，只需将其包装在这些触摸识别小部件之一中即可。无论您是刚刚了解有关Flutter上触摸事件管理的更多信息的开发人员，还是希望快速回顾的专业人士，本文都将帮助您快速掌握。
Flutter 从入门实践到开发一个APP之UI基础篇
07-26
本课程详细讲解 Flutter 中涉及到的视图组件，通过这门课程的学习使得大家能掌握使用 Flutter 来编写跨平台移动客户端应用中的基本布局视图。 本课程涉及到： * flutter 中 MaterialApp 使用精讲* flutter 中 Scaffold 使用精讲* flutter 中 Text 使用精讲* flutter 中 TextField 使用精讲* flutter 中 button 使用精讲* flutter 中 Row 使用精讲* flutter 中 Column 使用精讲* flutter 中 Container 使用精讲* flutter 中 Stack 使用精讲* flutter 中 Image 使用精讲* flutter 中 Checkbox 使用精讲* flutter 中 Switch 使用精讲* flutter 中 Radio 使用精讲* flutter 中 InkWell 使用精讲* flutter 中 CustomScrollView 使用精讲* flutter 中 ListView 使用精讲* flutter 中 GridView 使用精讲
flutter 之 ListView的使用与详解 map for listview.builder 的使用
艾米的猫儿的博客
02-01 1361
listview 的基础使用
Flutter ListView 列表点击和网页加载
子不语的博客
10-25 7171
上一篇讲了使用ListView加载列表数据，本篇，我们讲下列表项的点击，因为本篇的例子点击后是加载一个网页，所以本篇也讲下类似于Android的WebView和iOS的UIWebView加载网页。效果如下： item点击 在Android中，您可以通过调用方法setOnClickListener将OnClick绑定到按钮等view上. 在Flutter中，添加触摸监听器有两种方法: 具体可以查阅...
flutter 设置顶部导航栏
04-01
Flutter中设置顶部导航栏可以使用AppBar组件。AppBar组件是Material Design中的一个标准组件，通常用于顶部导航栏或者应用栏。 以下是如何在Flutter中设置顶部导航栏的步骤： 1. 导入Material库：在Flutter中使用AppBar组件需要导入Material库，可以在文件开头添加以下代码： ``` import 'package:flutter/material.dart'; ``` 2. 创建AppBar：使用AppBar组件来创建顶部导航栏，可以在Scaffold组件中添加AppBar，如下所示： ``` Scaffold( appBar: AppBar( title: Text("My App"), ), body: Container(), ); ``` 在这个例子中，我们创建了一个标题为“My App”的AppBar。 3. 自定义AppBar：AppBar组件支持许多自定义属性，比如颜色、图标、菜单等。下面是一些常用的自定义属性： - backgroundColor：设置导航栏背景颜色 - actions：设置导航栏右侧的操作按钮 - leading：设置导航栏左侧的返回按钮 - elevation：设置导航栏的阴影大小 - title：设置导航栏标题 以下是一个自定义AppBar的例子： ``` Scaffold( appBar: AppBar( title: Text("My App"), backgroundColor: Colors.blue, actions: [ IconButton( icon: Icon(Icons.search), onPressed: (){}, ), IconButton( icon: Icon(Icons.more_vert), onPressed: (){}, ), ], leading: IconButton( icon: Icon(Icons.menu), onPressed: (){}, ), elevation: 4.0, ), body: Container(), ); ``` 在这个例子中，我们设置了导航栏的背景颜色为蓝色，右侧添加了两个操作按钮，左侧添加了一个菜单按钮，并且设置了导航栏的阴影大小为4.0。 通过以上步骤，你已经成功设置了顶部导航栏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值