flutter 去掉Appbar上面一部分内容

问题描述

在使用appbar的时候不想添加上面的title,leading和actions,只想保留下面的bottom,Appbar结构如下
在这里插入图片描述
原导航栏代码:

DefaultTabController(
      //导航栏的长度
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: null,
          backgroundColor: Colors.red,
          centerTitle: true,
          //toolbarHeight: 56, //主要修改此参数,调整为bottom高度即可

          bottom: TabBar(
            indicatorColor: Colors.white70, //指示器的颜色
            labelColor: Colors.white, //选中文字颜色
            unselectedLabelColor: Colors.white60, //未选中文字颜色
            tabs: <Widget>[
              Tab(text: "时间"),
              Tab(text: "计划"),
              Tab(text: "待办"),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            _Planlist(),//第一个tab  body实现内容
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第二个tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第三个tab"),
                )
              ],
            ),
          ],
        ),
      ),
    );

原效果:
在这里插入图片描述
修改核心:
可限制toolbar高度,内部描述preferredSize会将此高度作为appbar整体高度
toolbarHeight: 56
修改如下:

	AppBar(
          title: null,
          backgroundColor: Colors.red,
          centerTitle: true,
          toolbarHeight: 56,//主要添加此参数进行限制
          bottom: TabBar(
            // isScrollable: true, //可滚动
            indicatorColor: Colors.white70, //指示器的颜色
            labelColor: Colors.white, //选中文字颜色
            unselectedLabelColor: Colors.white60, //未选中文字颜色
            // indicatorSize: TabBarIndicatorSize.label, //指示器与文字等宽
            tabs: <Widget>[
              Tab(text: "时间"),
              Tab(text: "计划"),
              Tab(text: "待办"),
            ],
          ),
        ),

修改后效果
在这里插入图片描述

### 去除摩尔纹的技术背景 在计算机图形学领域,摩尔纹是一种由于采样频率不足而产生的视觉伪影现象。这种效应通常发生在高分辨率图像被缩放或旋转时[^1]。为了减少或消除摩尔纹的影响,在 Flutter 应用程序开发过程中可以采用多种技术手段。 --- ### 方法一:调整纹理过滤模式 通过设置 `ImageFilter` 或者修改材质贴图的过滤方式来降低摩尔纹的发生概率。Flutter 提供了内置的支持用于处理图片渲染的质量参数: ```dart import 'package:flutter/material.dart'; class MoireReductionExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Moire Reduction')), body: Center( child: Image.asset( 'assets/example_image.jpg', filterQuality: FilterQuality.high, // 使用高质量滤波器 ), ), ); } } ``` 此代码片段展示了如何利用 `filterQuality` 属性提升图像质量并减轻摩尔纹影响[^2]。 --- ### 方法二:应用抗锯齿算法 抗锯齿(Anti-Aliasing)可以通过平滑边缘像素的方式间接缓解摩尔纹问题。虽然 Dart 和 Flutter 并未直接提供专门针对摩尔纹的 API,但开发者可通过自定义绘制逻辑引入更复杂的抗锯齿机制: ```dart CustomPaint( painter: MyPainter(), ), ``` 其中 `MyPainter` 是继承自 `CustomPainter` 的类,可以在其 `paint` 函数中调用 Canvas 对象的相关方法完成高级绘图操作[^3]。 --- ### 方法三:借助第三方库 如果项目需求较为复杂,则考虑集成外部依赖项可能是更好的选择之一。例如,“image”包支持广泛的图像编辑功能,包括模糊化、锐化以及颜色转换等功能,这些都可以帮助改善最终呈现效果从而削弱摩尔纹干扰。 安装命令如下所示: ```bash flutter pub add image ``` 加载与处理示例代码: ```dart import 'package:image/image.dart' as img; void processImage(String inputPath, String outputPath) { final originalImg = img.decodeImage(File(inputPath).readAsBytesSync())!; var filteredImg = img.gaussianBlur(originalImg, radius: 2); // 添加轻微模糊 File(outputPath).writeAsBytesSync(img.encodePng(filteredImg)); } ``` 以上脚本实现了简单的高斯模糊效果,有助于掩盖部分高频细节进而抑制摩尔条纹显现[^4]。 --- ### 性能优化建议 无论采取何种策略解决摩尔纹难题,都需要注意保持良好的性能表现。对于大规模数据集或者实时交互场景而言尤其重要的是平衡画质改进程度同计算资源消耗之间的关系[^5]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值