首页 > 其他分享 >一统天下 flutter - widget 容器类(只能有一个子): CustomSingleChildLayout - 自定义单组件布局

一统天下 flutter - widget 容器类(只能有一个子): CustomSingleChildLayout - 自定义单组件布局

时间:2023-04-27 15:35:04浏览次数:42  
标签:widget 自定义 CustomSingleChildLayout childSize override constraints flutter size

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 容器类(只能有一个子): CustomSingleChildLayout - 自定义单组件布局

示例如下:

lib\widget\container\custom_single_child_layout.dart

/*
 * CustomSingleChildLayout - 自定义单组件布局
 *
 * 注:约束是从上向下传递的,尺寸是从下向上传递的
 */

import 'package:flutter/material.dart';
import 'package:flutter_demo/helper.dart';

class CustomSingleChildLayoutDemo extends StatefulWidget {
  const CustomSingleChildLayoutDemo({Key? key}) : super(key: key);

  @override
  _CustomSingleChildLayoutDemoState createState() => _CustomSingleChildLayoutDemoState();
}

class _CustomSingleChildLayoutDemoState extends State<CustomSingleChildLayoutDemo> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("title"),),
      backgroundColor: Colors.orange,
      /// 自定义布局
      body: CustomSingleChildLayout(
        /// 通过指定的 delegate 实现具体的布局
        delegate: _MySingleChildLayoutDelegate(),
        /// 通过 LayoutId 指定需要布局的组件的 id
        child: Container(
          width: 200,
          height: 200,
          color: Colors.red,
        ),
      ),
    );
  }
}

class _MySingleChildLayoutDelegate extends SingleChildLayoutDelegate {

  /// 用于根据 CustomSingleChildLayout 自己的约束,决定 CustomSingleChildLayout 的子的约束
  /// constraints 为 CustomSingleChildLayout 的父传给 CustomSingleChildLayout 的约束
  /// 返回值为 CustomSingleChildLayout 传给子的约束
  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    log("getConstraintsForChild constraints:$constraints");
    var childConstraints = BoxConstraints(minWidth: 0, minHeight: 0, maxWidth: 100, maxHeight: constraints.maxHeight);
    return childConstraints;
  }

  /// 用于根据 CustomSingleChildLayout 自己的尺寸以及 CustomSingleChildLayout 的子的尺寸,决定 CustomSingleChildLayout 的子的位置
  /// size 为 CustomSingleChildLayout 的尺寸
  /// childSize 为 CustomSingleChildLayout 的子的尺寸
  /// 返回值为 CustomSingleChildLayout 的子的位置
  @override
  Offset getPositionForChild(Size size, Size childSize) {
    log("getPositionForChild size:$size, childSize:$childSize");
    var dx = (size.width - childSize.width) / 2;
    var dy = (size.height - childSize.height) / 2;
    return Offset(dx, dy);
  }

  /// 当 SingleChildLayoutDelegate 发生变化时,通过这里决定是否需要重新布局
  @override
  bool shouldRelayout(covariant SingleChildLayoutDelegate oldDelegate) {
    return true;
  }

  /// constraints 为 SingleChildLayoutDelegate 的父传给 SingleChildLayoutDelegate 的约束
  /// 返回值为 SingleChildLayoutDelegate 根据约束决定的自己的尺寸
  @override
  Size getSize(BoxConstraints constraints) {
    var size = super.getSize(constraints);
    log('getSize constraints:$constraints, size:$size');
    return size;
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

标签:widget,自定义,CustomSingleChildLayout,childSize,override,constraints,flutter,size
From: https://www.cnblogs.com/webabcd/p/flutter_lib_widget_container_custom_single_child_layout.

相关文章

  • Kivy页面布局中自定义组件位置的方法,可以通过指定组件的位置、尺寸和边距等属性来实现
    Python实现fromkivy.appimportAppfromkivy.uix.gridlayoutimportGridLayoutfromkivy.uix.buttonimportButtonclassMyGridLayout(GridLayout):  def__init__(self,**kwargs):    super(MyGridLayout,self).__init__(**kwargs)    self.cols=1......
  • Kivy盒子布局中自定义组件位置的方法,可以通过在盒子布局中添加pos_hint属性来指定组件
    Python实现fromkivy.appimportAppfromkivy.uix.boxlayoutimportBoxLayoutfromkivy.uix.buttonimportButtonclassMyBoxLayout(BoxLayout):  def__init__(self,**kwargs):    super(MyBoxLayout,self).__init__(**kwargs)    #添加按钮并指定位......
  • Kivy表格布局(Grid Layout)中自定义组件位置的方法,可以通过指定组件的row和col属性来实
    Python实现fromkivy.appimportAppfromkivy.uix.gridlayoutimportGridLayoutfromkivy.uix.buttonimportButtonclassMyGridLayout(GridLayout):  def__init__(self,**kwargs):    super(MyGridLayout,self).__init__(**kwargs)    self.cols=3......
  • RK3568用户自定义开机画面功能
    RK方案中的开机画面处画逻辑在RK的方案中,如RK1109,RK1126,RK3568这些嵌入式LINUX方案在开机画面的处理逻辑都是一致的.用户的uboot,kernel开机画面都是同dts,kernel一起入在一个boot.img文件中的.boot.img的文件结构,基本又同Android的boot文件结构类似,具体的文件结构,可以参考uboo......
  • #PowerBI 利用format函数,自定义格式显示
    PowerBI是一款强大的数据分析和可视化工具,它可以帮助我们快速地创建各种报表和仪表盘,展示数据的洞察和价值。在PowerBI中,有许多内置的函数可以帮助我们处理和转换数据,其中一个常用的函数就是Format函数。Format函数的作用是将一个值按照指定的格式进行显示,例如日期、时间、货币......
  • CefSharp自定义缓存实现
    大家好,我是沙漠尽头的狼。上文介绍了《C#使用CefSharp内嵌网页-并给出C#与JS的交互示例》,本文介绍CefSharp的缓存实现,先来说说添加缓存的好处:提高页面加载加速:CefSharp缓存可以缓存已经加载过的页面和资源,当用户再次访问相同的页面时,可以直接从缓存中加载,而不需要重新下载和解......
  • 博客园自定义皮肤设置
    目录博客园自定义皮肤设置1.选择皮肤darkgreentrip2.博客侧边栏公告3.页面定制css代码4.页首HTML代码博客园自定义皮肤设置1.选择皮肤darkgreentrip2.博客侧边栏公告<style>#back-top{position:fixed;bottom:10px;right:5px;z-index:99;}#ba......
  • Java自定义生成证书图片
    1、引入依赖<!--cmyk格式图片转换--><dependency><groupId>org.sejda.imageio</groupId><artifactId>webp-imageio</artifactId><version>0.1.6</version></dependen......
  • CefSharp自定义缓存实现
    大家好,我是沙漠尽头的狼。上文介绍了《C#使用CefSharp内嵌网页-并给出C#与JS的交互示例》,本文介绍CefSharp的缓存实现,先来说说添加缓存的好处:提高页面加载加速:CefSharp缓存可以缓存已经加载过的页面和资源,当用户再次访问相同的页面时,可以直接从缓存中加载,而不需要重新下载和解......
  • 阿里oss自定义域名从默认的预览改成下载
    阿里oss自定义域名从默认的预览改成下载今天测试人员反馈,说oss绑定的自定义域名,在电脑端的QQ浏览器打开的excel文件,打开显示黑屏,而不是下载。微软的Edge浏览器还算正常点,QQ浏览器直接黑屏。如下图:(1)Edge浏览器: (2)QQ浏览器: 以前我试过把已经上传到oss的图片,批量地从......