栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何在Flutter框架中添加渐变作为AppBar的背景

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何在Flutter框架中添加渐变作为AppBar的背景

我不认为您可以将渐变传递给AppBar,因为它期望使用Color而不是渐变。

但是,您可以创建自己的小部件来模仿AppBar,除非使用渐变。请看一下我从Planets-Flutter教程中拼凑而成的示例及其下面的代码。

import "package:flutter/material.dart";class Page extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Column(children : <Widget>[GradientAppBar("Custom Gradient App Bar"), Container()],);  }}class GradientAppBar extends StatelessWidget {  final String title;  final double barHeight = 50.0;  GradientAppBar(this.title);  @override  Widget build(BuildContext context) {    final double statusbarHeight = MediaQuery        .of(context)        .padding        .top;    return new Container(      padding: EdgeInsets.only(top: statusbarHeight),      height: statusbarHeight + barHeight,      child: Center(        child: Text(          title,          style: TextStyle(fontSize: 20.0, color: Colors.white, fontWeight: FontWeight.bold),        ),      ),      decoration: BoxDecoration(        gradient: LinearGradient( colors: [Colors.red, Colors.blue], begin: const FractionalOffset(0.0, 0.0), end: const FractionalOffset(0.5, 0.0), stops: [0.0, 1.0], tileMode: TileMode.clamp        ),      ),    );  }}

希望这可以帮助。如果您有任何问题,请告诉我。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/418491.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号