flutter-Decoration

Decoration

继承

Object-> Diagnosticable-> Decoration

实现
BoxDecoration
FlutterLogoDecoration
ShapeDecoration
UnderlineTabIndicator

在这里插入图片描述

注解

@Immutable 啥玩意? 英文翻译不可变,创建了就不可变了,变了就会生成一个新的 这个不是重点,继续下面翻译

构造方法(加了一个const??)

Abstract const constructor. This constructor enables subclasses to provide const constructors so that they can be used in const expressions.
抽象const构造函数。此构造函数使子类能够提供const构造函数,以便它们可以在const表达式中使用

const Decoration()
BoxDecoration

Object-> Diagnosticable-> Decoration->BoxDecoration

构造方法
const BoxDecoration({
  this.color,
  this.image,
  this.border,
  this.borderRadius,
  this.boxShadow,
  this.gradient,
  this.backgroundBlendMode,
  this.shape = BoxShape.rectangle,
}) : assert(shape != null),
     assert(
       backgroundBlendMode == null || color != null || gradient != null,
       'backgroundBlendMode applies to BoxDecoration\'s background color or '
       'gradient, but no color or gradient was provided.'
     );

创建一个盒子装饰。
  • 如果color为null,则此装饰不会绘制背景颜色
  • 如果color为null,则此装饰不会绘制背景颜色。
  • 如果image为null,则此装饰不会绘制背景图像。
  • 如果border为null,则此装饰不会绘制边框。
  • 如果borderRadius为null,则此装饰使用更高效的背景绘制命令。该borderRadius如果参数必须为空shape是 BoxShape.circle。
  • 如果boxShadow为null,则此装饰不会绘制阴影。
  • 如果gradient为null,则此装饰不会绘制渐变。
  • 如果backgroundBlendMode为null,则此装饰使用BlendMode.srcOver进行绘制
该shape参数不能为空。 final修饰必须要在构造方法赋值
属性
backgroundBlendMode → BlendMode
border → BoxBorder边框
borderRadius → BorderRadiusGeometry圆角
boxShadow → List一个BoxShadow集合
color → Color背景色
gradient → GradientRadialGradient
image → DecorationImage背景图片
padding → EdgeInsetsGeometry
shape → BoxShape形状,默认矩形
shape → ShapeBorder形状,ShapeDecoration的属性和BoxDecoration的区别
UnderlineTabIndicator

与TabBar.indicator一起使用以在选定选项卡下方绘制水平线。

属性
borderSide → BorderSide盒子边框的一面
insets → EdgeInsetsGeometry??
下面需要学习的widget
### 如何在 Flutter 中创建和使用侧边栏导航 Drawer #### 使用 `Drawer` 实现基本的侧边栏导航 为了实现在 Flutter 应用程序中的侧边栏导航,可以利用内置的小部件 `Drawer` 来完成这一需求。此小部件通常配合 `Scaffold` 一同工作,在应用程序界面的一侧提供一个可滑动出来的菜单。 下面是一个简单的例子,展示了如何集成并配置 `Drawer`: ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Side Menu Example')), body: Center(child: Text('Content goes here!')), drawer: Drawer( // 创建抽屉式导航 child: ListView( padding: EdgeInsets.zero, children: [ DrawerHeader( decoration: BoxDecoration(color: Colors.blue), child: Text('Menu Options'), ), ListTile( title: Text('Item 1'), onTap: () {}, ), ListTile( title: Text('Item 2'), onTap: () {}, ), ], ), ), ), ); } } ``` 这段代码定义了一个带有顶部应用栏的应用窗口,并在其左侧加入了一个包含两个选项项 (`Item 1`, `Item 2`) 的简单菜单[^1]。 #### 利用第三方库增强功能 对于更复杂的需求,则可能需要考虑采用一些专门设计用于构建侧边栏导航的插件或包。例如,`flutter_inner_drawer` 提供了一种简便的方式来创建内部侧面部分(左/右),允许插入列表菜单或其他内容;而 `SidebarX` 是另一个流行的多平台侧边栏导航组件,支持流畅动画效果以及更多自定义设置[^2][^3]。 通过这些工具的帮助,开发者可以根据具体应用场景灵活调整样式与交互逻辑,从而打造出更加美观实用的用户体验。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值