首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )

【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )

作者头像
韩曙亮
发布于 2023-03-28 13:39:19
发布于 2023-03-28 13:39:19
3.1K00
代码可运行
举报
运行总次数:0
代码可运行

文章目录

一、FractionallySizedBox 组件


FractionallySizedBox 组件 : 可控制组件在水平/垂直方向上填充满父容器 ;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class FractionallySizedBox extends SingleChildRenderObjectWidget {
  const FractionallySizedBox({
    Key key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child,
  }) : assert(alignment != null),
       assert(widthFactor == null || widthFactor >= 0.0),
       assert(heightFactor == null || heightFactor >= 0.0),
       super(key: key, child: child);
}

FractionallySizedBox 组件用法 :

  • 设置宽度充满父容器 : widthFactor 字段设置 ;
  • 设置高度填充满父容器 : heightFactor 字段设置 ;
  • 设置平铺的组件 : child 字段设置 Widget 组件 ;
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 水平/垂直方向平铺组件
FractionallySizedBox(
  // 设置宽度充满父容器
  widthFactor: 1,
  // 设置高度填充满父容器
  heightFactor: 1,
  // 要设置的水平 / 垂直方向的平铺操作的组件
  child: 要控制平铺的组件 ( Widget 类型 ),
  ),
)

代码示例 :

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 水平/垂直方向平铺组件
FractionallySizedBox(
  // 设置宽度充满父容器
  widthFactor: 1,
  // 要设置的水平 / 垂直方向的平铺操作的组件
  child: Container(
    decoration: BoxDecoration(color: Colors.black),
    child: Text(
      "高度自适应, 宽度充满父容器",
      style: TextStyle(color: Colors.amberAccent),
    ),
  ),
)

二、Stack 布局组件


Stack 布局组件 : 相当于帧布局 ;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Stack extends MultiChildRenderObjectWidget {
  /// Creates a stack layout widget.
  ///
  /// By default, the non-positioned children of the stack are aligned by their
  /// top left corners.
  Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,
    List<Widget> children = const <Widget>[],
  }) : super(key: key, children: children);
}

Stack 布局组件用法 : 在 children 字段设置若干 Widget 组件 , 最后一个组件在最顶端显示 , 覆盖前面的组件 ;

代码示例 :

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 帧布局
Stack(
  children: <Widget>[
    Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",
      width: 100,
      height: 100,
    ),
    
    Image.network("https://img-blog.csdnimg.cn/20210228180808133.png",
        width: 25,
        height: 25,
      ),
  ],
),

三、Positioned 组件


Positioned 组件 : 用于在 Stack 布局中指定某个组件的位置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Positioned extends ParentDataWidget<Stack> {
  /// Creates a widget that controls where a child of a [Stack] is positioned.
  ///
  /// Only two out of the three horizontal values ([left], [right],
  /// [width]), and only two out of the three vertical values ([top],
  /// [bottom], [height]), can be set. In each case, at least one of
  /// the three must be null.
  ///
  /// See also:
  ///
  ///  * [Positioned.directional], which specifies the widget's horizontal
  ///    position using `start` and `end` rather than `left` and `right`.
  ///  * [PositionedDirectional], which is similar to [Positioned.directional]
  ///    but adapts to the ambient [Directionality].
  const Positioned({
    Key key,
    this.left, // 设置组件距离左侧距离
    this.top, // 设置组件距离顶部距离
    this.right, // 设置组件距离右侧距离
    this.bottom, // 设置组件距离底部距离
    this.width, // 设置组件宽度
    this.height, // 设置组件高度
    @required Widget child,
  }) : assert(left == null || right == null || width == null),
       assert(top == null || bottom == null || height == null),
       super(key: key, child: child);
}

Positioned 组件用法 :

  • 设置组件宽度 : width 字段 ;
  • 设置组件高度 : height 字段 ;
  • 设置组件距离左侧距离 : left 字段 ;
  • 设置组件距离顶部距离 : top 字段 ;
  • 设置组件距离右侧距离 : right 字段 ;
  • 设置组件距离底部距离 : bottom 字段 ;

代码示例 :

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 帧布局
Stack(
  children: <Widget>[
    Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",
      width: 100,
      height: 100,
    ),
    // 设置组件位置在 Stack 的相对位置
    Positioned(
      right: 0, // 距离右侧 0 距离
      bottom: 0, // 距离底部 0 距离
      // 设置约束的组件位置
      child: Image.network("https://img-blog.csdnimg.cn/20210228180808133.png",
        width: 25,
        height: 25,
      ),
    ),
  ],
),

四、 完整代码示例


完整代码示例 :

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import 'package:flutter/material.dart';

class LayoutPage extends StatefulWidget {
  @override
  _LayoutPageState createState() => _LayoutPageState();
}

class _LayoutPageState extends State<LayoutPage> {

  /// 当前被选中的底部导航栏索引
  int _currentSelectedIndex = 0;

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    // 文本组件样式 , 可以设置给 Text 文本组件
    // 设置字体大小 20, 颜色红色
    TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);

    return MaterialApp(
      title: '布局组件示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        // 顶部标题栏
        appBar: AppBar(title: Text('布局组件示例'),),

        // 底部导航栏 BottomNavigationBar 设置
        // items 可以设置多个 BottomNavigationBarItem
        bottomNavigationBar: BottomNavigationBar(

          // 设置当前选中的底部导航索引
          currentIndex: _currentSelectedIndex,

          // 设置点击底部导航栏的回调事件 , index 参数是点击的索引值
          onTap: (index){
            // 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引
            // 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡
            setState(() {
              // 改变 int _currentSelectedIndex 变量的状态
              _currentSelectedIndex = index;
            });
          },

          // 条目
          items: [

          // 设置底部导航栏条目, 每个条目可以设置一个图标
          BottomNavigationBarItem(
            // 默认状态下的图标
            icon: Icon(Icons.home, color: Colors.grey,),

            // 激活状态下的图标
            activeIcon: Icon(Icons.home, color: Colors.red,),

            // 设置标题
            title: Text("主页")
          ),

          // 设置底部导航栏条目, 每个条目可以设置一个图标
          BottomNavigationBarItem(
            // 默认状态下的图标
            icon: Icon(Icons.settings, color: Colors.grey,),

            // 激活状态下的图标
            activeIcon: Icon(Icons.settings, color: Colors.red,),

              // 设置标题
              title: Text("设置")
          )

        ],),

        // 设置悬浮按钮
        floatingActionButton: FloatingActionButton(
          onPressed: (){
            print("悬浮按钮点击");
          },
          child: Text("悬浮按钮组件"),
        ),

        // Container 容器使用
        body:
        _currentSelectedIndex == 0 ?

        // 刷新指示器组件
        RefreshIndicator(
          // 显示的内容
          child: ListView(
            children: <Widget>[
              Container( // 对应底部导航栏设置选项卡
                // 设置容器的装饰器 , BoxDecoration 是最常用的装饰器
                // 可以自行查看 BoxDecoration 中可以设置的属性
                decoration: BoxDecoration(color: Colors.white),

                // 设置 child 子组件居中方式, 居中放置
                alignment: Alignment.center,

                // 子组件, 子组件设置为一个 Column 组件
                child: Column(
                  // Column 子组件, 这里设置 Text 文本组件
                  children: <Widget>[
                    Text("主页面选项卡, 下拉刷新"),

                    // 水平方向排列的线性布局
                    Row(
                      children: <Widget>[

                        // 原始图片, 用于对比
                        Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",
                          width: 100,
                          height: 100,
                        ),

                        // 圆形裁剪组件 , 将 child 布局裁剪成圆形
                        ClipOval(
                          // 使用 SizedBox 组件约束布局大小
                          child: SizedBox(
                            width: 100,
                            height: 100,
                            // 使用 SizedBox 约束该 Image 组件大小
                            child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png"),
                          ),
                        ),

                        Padding(
                          // 设置内边距 5
                          padding: EdgeInsets.all(15),

                          // 方形裁剪组件 , 将组件裁剪成方形
                          child: ClipRRect(
                            // 设置裁剪圆角, 四个角设置半径为 10 的圆角
                            borderRadius: BorderRadius.all(Radius.circular(10)),

                            // 修改透明度组件 , 这里设置 50% 透明度
                            child: Opacity(
                                opacity: 0.5,
                                // 设置 100x100 大小的图片组件
                                child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",
                                  width: 100,
                                  height: 100,
                                ),
                            ),
                          ),
                        ),

                      ],
                    ),

                    // 设置一个布局容器 , 用于封装 PageView 组件
                    Container(
                      // 设置高度
                      height: 200,
                      // 设置边距
                      margin: EdgeInsets.all(15),
                      // 设置装饰, 背景深橙色
                      decoration: BoxDecoration(
                          color: Colors.white
                      ),
                      // 设置子组件 PageView 的裁剪组件
                      child:
                      PhysicalModel(
                        color: Colors.transparent,

                        // 设置圆角半径 15
                        borderRadius: BorderRadius.circular(50),

                        // 设置裁剪行为 , 抗锯齿
                        clipBehavior: Clip.antiAlias,

                        // 设置 PageView 组件
                        child:
                        PageView(
                          // 设置 PageView 中封装的若干组件
                          children: <Widget>[
                            // 第一个页面组件
                            Container(
                              // 设置居中方式 , 居中显示
                              alignment:Alignment.center,
                              // 设置装饰器 , 绿色背景
                              decoration: BoxDecoration(color: Colors.green),
                              // 显示的主要文字
                              child: Text("页面 0", style: TextStyle(fontSize: 20, color: Colors.black),),
                            ),

                            // 第二个页面组件
                            Container(
                              // 设置居中方式 , 居中显示
                              alignment:Alignment.center,
                              // 设置装饰器 , 绿色背景
                              decoration: BoxDecoration(color: Colors.red),
                              // 显示的主要文字
                              child: Text("页面 1", style: TextStyle(fontSize: 20, color: Colors.white),),
                            ),

                            // 第三个页面组件
                            Container(
                              // 设置居中方式 , 居中显示
                              alignment:Alignment.center,
                              // 设置装饰器 , 绿色背景
                              decoration: BoxDecoration(color: Colors.black),
                              // 显示的主要文字
                              child: Text("页面 2", style: TextStyle(fontSize: 20, color: Colors.yellow),),
                            ),

                          ],
                        ),
                      ),
                    ),


                    Container(
                      child: Column(
                        children: <Widget>[
                          // 水平/垂直方向平铺组件
                          FractionallySizedBox(
                            // 设置宽度充满父容器
                            widthFactor: 1,

                            // 要设置的水平 / 垂直方向的平铺操作的组件
                            child: Container(
                              decoration: BoxDecoration(color: Colors.black),
                              child: Text(
                                "高度自适应, 宽度充满父容器",
                                style: TextStyle(color: Colors.amberAccent),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),

                    // 帧布局
                    Stack(
                      children: <Widget>[
                        Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",
                          width: 100,
                          height: 100,
                        ),

                        // 设置组件位置在 Stack 的相对位置
                        Positioned(
                          right: 0, // 距离右侧 0 距离
                          bottom: 0, // 距离底部 0 距离

                          // 设置约束的组件位置
                          child: Image.network("https://img-blog.csdnimg.cn/20210228180808133.png",
                            width: 25,
                            height: 25,
                          ),
                        ),
                      ],
                    ),


                  ],
                ),
              ),
            ],
          ),

          // 刷新时回调的方法
          // 列表发生下拉操作时, 回调该方法
          // 该回调是 Future 类型的
          onRefresh: _refreshIndicatorOnRefresh,
        )
        :
        Container( // 对应底部导航栏设置选项卡
          // 设置容器的装饰器 , BoxDecoration 是最常用的装饰器
          // 可以自行查看 BoxDecoration 中可以设置的属性
          decoration: BoxDecoration(color: Colors.white),

          // 设置 child 子组件居中方式, 居中放置
          alignment: Alignment.center,

          // 子组件, 子组件设置为一个 Column 组件
          child: Column(
            // Column 子组件, 这里设置 Text 文本组件
            children: <Widget>[
              Text("设置页面选项卡")


            ],
          ),

        ) , // 该设置与 _currentSelectedIndex == 0? 相对应, ?: 三目运算符
      ),
    );
  }

  /// RefreshIndicator 发生下拉操作时, 回调该方法
  /// 该方啊是一个异步方法 , 在方法体前添加 async 关键字
  Future<Null> _refreshIndicatorOnRefresh() async{
    // 暂停 500 ms , 使用 await 关键字实现
    // 在这 500 ms 之间 , 列表处于刷新状态
    // 500 ms 之后 , 列表变为非刷新状态
    await Future.delayed(Duration(milliseconds: 500));
    return null;
  }

}

运行效果展示 :

五、 相关资源


参考资料 :

博客源码下载 :

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-03-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )
代码示例 : PhysicalModel 组件裁剪 PageView 组件 , 将 PageView 组件裁剪成圆角矩形样式 ;
韩曙亮
2023/03/28
1.6K0
【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )
【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )
Row 组件相关参数 : Row 组件相当于线性布局 , 水平方向布局 , 组件从左到右 ;
韩曙亮
2023/03/28
2.6K0
【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )
Wrap 组件 : 该组件是可换行的水平线性布局组件 , 与 Row 组件间类似 , 但是可以换行 ;
韩曙亮
2023/03/28
9.6K0
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )
【Flutter实战】六大布局组件
老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column )、叠加布局组件( Stack 和 IndexedStack )、流式布局组件( Wrap )和 自定义布局组件(Flow)。
老孟Flutter
2020/09/11
2.1K0
【Flutter实战】六大布局组件
【Flutter】Flutter 手势交互 ( 跟随手指运动的小球 )
设置小球坐标变量 : 其中 currentX 是距离左侧边界的距离 , currentY 是距离右侧边界的距离 ;
韩曙亮
2023/03/28
5950
【Flutter】Flutter 手势交互 ( 跟随手指运动的小球 )
用Flutter构建漂亮的UI界面 – 基础组件篇
Flutter作为时下最流行的技术之一,凭借其出色的性能以及抹平多端的差异优势,早已引起大批技术爱好者的关注,甚至一些闲鱼,美团,腾讯等大公司均已开始使用。虽然目前其生态还没有完全成熟,但身靠背后的Google加持,其发展速度已经足够惊人,可以预见将来对Flutter开发人员的需求也会随之增长。
Javanx
2019/09/04
2.9K0
用Flutter构建漂亮的UI界面 – 基础组件篇
《Flutter》-- 5.Flutter页面布局
盒约束是指组件可以按照指定限制条件来决定如何布局自身位置。Flutter提供的尺寸限制类容器可以用于限制容器的大小,并提供了多种约束容器组件,常见的有ConstrainedBox、SizedBox和UnconstrainedBox。
爱学习的程序媛
2022/04/07
1.1K0
《Flutter》-- 5.Flutter页面布局
深入理解 Flutter 鸿蒙版的 Stack 布局:适配屏幕与层叠样式布局
在 Flutter 中,布局是构建用户界面的基础。今天,我们将重点探讨 Flutter 的 Stack 布局,了解如何使用它创建复杂的界面元素,并实现响应式设计,以适应不同屏幕大小的设备。
淼学派对
2024/11/04
3100
【Flutter】StatefulWidget 组件 ( PageView 组件 )
PageView 组件构造函数 : 构造函数中的可选参数就是 PageView 组件的所有可设置选项 ;
韩曙亮
2023/03/28
1.3K0
【Flutter】StatefulWidget 组件 ( PageView 组件 )
『Flutter』布局组件 Container、Row、Column、Stack
经过上一篇文章,开发出来了第二个 Flutter 程序,接下来是给大家详细的介绍下 Flutter 的布局组件。
杨不易呀
2024/01/15
2.1K0
『Flutter』布局组件 Container、Row、Column、Stack
flutter系列之:flutter中常用的Stack layout详解
对于现代APP的应用来说,为了更加美观,通常会需要用到不同图像的堆叠效果,比如在一个APP用户背景头像上面添加一个按钮,表示可以修改用户信息等。
程序那些事
2022/09/20
7400
【Flutter实战】定位装饰权重组件及柱状图案例
第一次鸦片战争,是1840年至1842年英国对中国发动的一场战争,也是中国近代史的开端。闭关锁国后的清朝逐步落后于世界大潮,但在外贸中,一直处于贸易顺差地位。 为了扭转对华贸易逆差,英国开始向中国走私毒品鸦片。1838年冬,道光帝派湖广总督林则徐为钦差大臣,赴广东查禁鸦片。英国政府以此为借口,决定派出远征军侵华,英国国会也通过对华战争的拨款案。
老孟Flutter
2020/09/11
1.5K0
【Flutter实战】定位装饰权重组件及柱状图案例
Flutter中Stack层叠组件以及与Align、Positioned组件实现定位布局
1. Stack 组件 Stack 表示堆的意思,用此组件修饰的子组件会“堆”在一起。 常见属性: 1. alignment 对齐方式。值的类型为Alignment; 2. children 子组件。值的类型为Widget; 代码示例: import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } // 抽离成一个单独的组件 class MyApp extends StatelessWidget{ @ov
越陌度阡
2020/12/22
1.2K0
Flutter中Stack层叠组件以及与Align、Positioned组件实现定位布局
【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
BottomNavigationBar 组件是底部导航栏 , 用于设置给 Scaffold 组件的 bottomNavigationBar 字段 ;
韩曙亮
2023/03/28
2.8K0
【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
Flutter | 布局组件
布局类组件都会包含一个或多个组件,不同的布局类组件对子组件(layout)方式不同。在 Flutter 中 Element 树才是最终的绘制树,Element 树是通过 Widget 树来创建的 (通 Widget.createElement()) ,Widget 其实就是 Element 的配置数据。
345
2022/02/11
2.9K0
Flutter | 布局组件
Flutter布局基础——Stack层叠布局
Stack Widget的子视图要么是positioned,要么是non-positioned。Positioned子视图是指使用Positioned的widget包括起来的子视图,通过设置相对于Stack的top、bottom、left、right属性来确认自身位置,其中至少要有一个不为空。
莫空9081
2021/07/27
3.3K0
flutter系列之:按比例缩放的AspectRatio和FractionallySizedBox
我们在构建UI的时候,为了适应不同的屏幕大小,通常需要进行一些自适应的配置,而最常见的自适应就是根据某个宽度或者高度自动进行组件的缩放。
程序那些事
2022/10/10
2.4K0
【Flutter 专题】130 图解 DraggableScrollableSheet 可手势滑动的菜单栏
和尚发现在长期未登陆小米应用市场时,再次登陆会有可滑动的半屏底部菜单,供用户方便下载和推广;而在 Flutter 中这个半屏底部菜单并不是一个简单的 BottomSheet 完成的,可以通过 DraggableScrollableSheet 根据手势操作滑动固定位的菜单栏完成;和尚简单学习一下;
阿策小和尚
2021/07/05
1.6K0
【Flutter 专题】130 图解 DraggableScrollableSheet 可手势滑动的菜单栏
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )
widthFactor ( 宽度因子 ) 和 heightFactor ( 高度因子 ) 用于控制该组件的宽高 , 类型为 double 浮点型 ;
韩曙亮
2023/03/29
8.7K0
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )
【Flutter】Flutter 布局组件 ( Opacity 组件 | ClipRRect 组件 | Padding 组件 )
文章目录 一、Opacity 组件 二、ClipRRect 组件 三、Padding 组件 四、完整代码示例 五、相关资源 一、Opacity 组件 ---- Opacity 组件 : 用于修改组件透明度 ; class Opacity extends SingleChildRenderObjectWidget { const Opacity({ Key key, @required this.opacity, this.alwaysIncludeSemantics = fals
韩曙亮
2023/03/28
2.1K0
【Flutter】Flutter 布局组件 ( Opacity 组件 | ClipRRect 组件 | Padding 组件 )
推荐阅读
【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )
1.6K0
【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )
2.6K0
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )
9.6K0
【Flutter实战】六大布局组件
2.1K0
【Flutter】Flutter 手势交互 ( 跟随手指运动的小球 )
5950
用Flutter构建漂亮的UI界面 – 基础组件篇
2.9K0
《Flutter》-- 5.Flutter页面布局
1.1K0
深入理解 Flutter 鸿蒙版的 Stack 布局:适配屏幕与层叠样式布局
3100
【Flutter】StatefulWidget 组件 ( PageView 组件 )
1.3K0
『Flutter』布局组件 Container、Row、Column、Stack
2.1K0
flutter系列之:flutter中常用的Stack layout详解
7400
【Flutter实战】定位装饰权重组件及柱状图案例
1.5K0
Flutter中Stack层叠组件以及与Align、Positioned组件实现定位布局
1.2K0
【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
2.8K0
Flutter | 布局组件
2.9K0
Flutter布局基础——Stack层叠布局
3.3K0
flutter系列之:按比例缩放的AspectRatio和FractionallySizedBox
2.4K0
【Flutter 专题】130 图解 DraggableScrollableSheet 可手势滑动的菜单栏
1.6K0
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )
8.7K0
【Flutter】Flutter 布局组件 ( Opacity 组件 | ClipRRect 组件 | Padding 组件 )
2.1K0
相关推荐
【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档