小部件(Widget)组件视图容器汇总（属性说明+代码明细）

已于 2024-01-24 15:31:14 修改
阅读量1.1k 收藏 25
点赞数 31
文章标签： SDK App 云计算 物联网 小程序 UI 开发语言
于 2024-01-15 14:18:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ms_Smart/article/details/135596251
版权

小部件(Widget)不同于小程序页面，仅支持有限的组件，用于绘制小部件(Widget) 的 UI 界面。现总结视图容器的内置组件明细：

view

属性说明

属性类型默认值必填说明备注
hover-classstringnone否指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-timenumber50否按住后多久出现点击态，单位毫秒
hover-stay-timenumber400否手指松开后点击态保留时间，单位毫秒

示例代码

TYML
<view class="page-head">
	<view class="page-head-title">view</view>
	<view class="page-head-line"></view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">
    <view>flex-direction: row</view>
    <view>横向布局</view>
  </view>
  <view class="flex-wrp" style="flex-direction:row;justify-content: center;">
    <view class="flex-item demo-text-1">A</view>
    <view class="flex-item demo-text-2">B</view>
    <view class="flex-item demo-text-3">C</view>
  </view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">
    <view>flex-direction: column</view>
    <view>纵向布局</view>
  </view>
  <view class="flex-wrp" style="flex-direction:column;">
    <view class="flex-item flex-item-V demo-text-1">A</view>
    <view class="flex-item flex-item-V demo-text-2">B</view>
    <view class="flex-item flex-item-V demo-text-3">C</view>
  </view>
</view>

scroll-view

可滚动视图区域，可实现横向滚动和竖向滚动。使用竖向滚动时，需要给定一个固定高度，可以通过样式来设置 height。组件属性的长度单位支持 px 和 rpx。

属性说明

属性类型默认值必填说明备注
scroll-xbooleanfalse否允许横向滚动
scroll-ybooleanfalse否允许纵向滚动
upper-thresholdnumber/string50否距顶部/左边多远时，触发 scrolltoupper 事件
lower-thresholdnumber/string50否距底部/右边多远时，触发 scrolltolower 事件
scroll-topnumber/string否设置竖向滚动条位置
scroll-leftnumber/string否设置横向滚动条位置
scroll-into-viewstring否值应为某子元素 id（id 不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animationbooleanfalse否在设置滚动条位置时使用动画过渡
refresher-enabledbooleanfalse否开启自定义下拉刷新
refresher-thresholdnumber45否设置自定义下拉刷新阈值
refresher-default-stylestring"black"否设置自定义下拉刷新默认样式，支持设置 black、white、none， none 表示不使用默认样式
refresher-backgroundstring"#FFF"否设置自定义下拉刷新区域背景颜色
refresher-triggeredbooleanfalse否设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
bind:scrolleventhandle--否滚动时触
bind:scrolltouppereventhandle--否滚动到顶部/左边时触发
bind:scrolltolowereventhandle--否滚动到底部/右边时触发
bind:refresherpullingeventhandle--否自定义下拉刷新控件被下拉
bind:refresherrefresheventhandle--否自定义下拉刷新被触发
bind:refresherrestoreeventhandle--否自定义下拉刷新被复位
bind:refresheraborteventhandle--否自定义下拉刷新被中止

示例代码

TYML
<view class="page-head">
	<view class="page-head-title">scroll-view</view>
	<view class="page-head-line"></view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">
    <text>Vertical Scroll</text>
    <view>纵向滚动</view>
  </view>
  <view class="page-section-spacing">
    <scroll-view
      style="height: 150px;"
      scrollY="{{true}}"
      bind:scroll="scroll"
      bind:scrolltoupper="upper"
      bind:scrolltolower="lower"
      >
      <view id="demo1" class="scroll-view-item demo-text-1">A</view>
      <view id="demo2"  class="scroll-view-item demo-text-2">B</view>
      <view id="demo3" class="scroll-view-item demo-text-3">C</view>
    </scroll-view>
  </view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">
    <text>Horizontal Scroll</text>
    <view>横向滚</view>
  </view>
  <view class="page-section-spacing">
    <scroll-view
      class="scroll-view_H"
      scrollX="{{true}}"
      scrollIntoView="{{toView}}"
      scrollWithAnimation="{{true}}"
      bind:scroll="scroll"
      bind:scrolltoupper="upper"
      bind:scrolltolower="lower"
      >
      <view class="box">
        <view id="demo4" class="scroll-view-item_H demo-text-1">A</view>
        <view id="demo5"  class="scroll-view-item_H demo-text-2">B</view>
        <view id="demo6" class="scroll-view-item_H demo-text-3">C</view>
      </view>
    </scroll-view>
  </view>
</view>

JS
Page({
  data: {
    toView: 'demo5',
  },
  upper(e) {
    console.log('demo upper', e);
  },
  lower(e) {
    console.log('demo lower', e);
  },
  scroll(e) {
    console.log('demo scroll', e);
  },
});

TYSS
.page-section {
  width: 100%;
  display: block;
  margin: 30px 0;
}
.page-section:last-child {
  margin-bottom: 0;
}
.page-section-spacing {
  margin-top: 30px;
  box-sizing: border-box;
  padding: 0 40px;
}
.scroll-view_H {
  width: 100%;
  white-space: nowrap;
}
.box {
  display: flex;
  flex-wrap: nowrap;
  width: 300%;
}
.scroll-view-item_H {
  flex: 1;
  height: 150px;
  color: #ffffff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-view-item {
  height: 150px;
  color: #ffffff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-text-1 {
  background-color: #1aad19;
}
.demo-text-2 {
  background-color: #2782d7;
}
.demo-text-3 {
  background-color: #f1f1f1;
  color: #353535;
}

常见问题（FAQ）

为何 scroll-view 在 popup 扩展组件中无法滑动？

popup 组件上加上 disableScroll={{false}} 属性才能滑动。

如何监听 scroll-view 滚动到底部？

可以直接在 onScroll 方法中进行处理，使用 onScrollToLower 监听 scroll-view 的滚动高度来进行判断是否滑动到了底部。 scrollHeight 是 scroll-view 里面所有 view 的高度和，scrollTop 是滚动的值。

自定义页面蒙层的时候，当滚动蒙层里面的内容，蒙层底下页面也能跟着滑动？

可以给蒙层内部 scroll-view 或 view 添加 catch:touchmove事件,阻止事件冒泡。

swiper

滑块视图容器。其中只可放置 swiper-item 组件，否则会导致未定义的行为。

属性说明

属性类型默认值必填说明
indicator-dotsbooleanfalse否是否显示面板指示点
indicator-colorcolor#666666否指示点颜色
indicator-active-colorcolor#333333否当前选中的指示点颜色
autoplaybooleanfalse否是否自动切换
currentnumber0否当前所在滑块的 index
intervalnumber5000否自动切换时间间隔，单位 ms
durationnumber500否滑动动画时长，单位 ms
circularbooleanfalse否是否采用衔接滑动
verticalbooleanfalse否滑动方向是否为纵向
bind:changeeventhandle否current 改变时会触发 change 事件，event.detail = {current, source}
bind:animationfinisheventhandle否动画结束时会触发 animationfinish 事件，event.detail 同上

change 事件 source 返回值

change 事件的 source 字段，表示导致变更的原因，可能值如下：

值说明
autoplay自动播放导致 swiper 变化
touch用户划动引起 swiper 变化
空字符串其它原因

示例代码

TYML
<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper
        indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}"
        circular="{{circular}}"
        vertical="{{vertical}}"
        interval="{{interval}}"
        duration="{{duration}}"
        >
        <block ty:for="{{background}}" ty:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
      <view class="tyui-cells tyui-cells_after-title">
        <view class="page-cell tyui-cell_switch">
          <view class="tyui-cell__bd">指示点</view>
          <view class="tyui-cell__ft">
            <switch checked="{{indicatorDots}}" bind:change="changeProperty" data-property-name="indicatorDots" />
          </view>
        </view>
        <view class="page-cell tyui-cell_switch">
          <view class="tyui-cell__bd">自动播放</view>
          <view class="tyui-cell__ft">
            <switch checked="{{autoplay}}" bind:change="changeProperty" data-property-name="autoplay" />
          </view>
        </view>
        <view class="page-cell tyui-cell_switch">
          <view class="tyui-cell__bd">衔接滑动</view>
          <view class="tyui-cell__ft">
            <switch checked="{{circular}}" bind:change="changeProperty" data-property-name="circular" />
          </view>
        </view>
        <view class="page-cell tyui-cell_switch">
          <view class="tyui-cell__bd">竖向</view>
          <view class="tyui-cell__ft">
            <switch checked="{{vertical}}" bind:change="changeProperty" data-property-name="vertical" />
          </view>
        </view>
      </view>
    </view>
 
    <view class="page-section page-section-spacing">
      <view class="page-section-title">
        <text>幻灯片切换时长(ms)</text>
        <text class="info">{{duration}}</text>
      </view>
      <slider value="{{duration}}" min="{{500}}" max="{{2000}}" bind:change="changeProperty" data-property-name="duration" />
      <view class="page-section-title">
        <text>自动播放间隔时长(ms)</text>
        <text class="info">{{interval}}</text>
      </view>
      <slider value="{{interval}}" min="{{2000}}" max="{{10000}}" bind:change="changeProperty" data-property-name="interval" />
    </view>
  </view>
</view>

JS
Page({
  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    circular: true,
    interval: 2000,
    duration: 500,
    previousMargin: 0,
    nextMargin: 0,
  },
  change: function (e) {},
  changeProperty: function (e) {
    var propertyName = e.currentTarget.dataset.propertyName;
    var newData = {};
    newData[propertyName] = e.detail.value;
    this.setData(newData);
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots,
    });
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay,
    });
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value,
    });
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value,
    });
  },
});

swiper-item

滑块视图容器子项，仅可放置在 swiper 组件中，宽高自动设置为 100%。

movable-area

movable-view 的可移动区域。

属性说明

属性类型默认值必填说明
scale-areabooleanfalse否当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area

示例代码

TYML
<view class="page-section">
  <view class="page-section-title l-r-padding">movable移动功能</view>
  <view class="area-wrap">
    <movable-area class="area">
      <movable-view class="block" x="{{x}}" y="{{y}}" direction="all">
        text
      </movable-view>
    </movable-area>
  </view>
  <view class="btn-wrap">
    <view class="btn-line">
      <button type="primary" bind:tap="moveFn" class="btn">点击移动到(30px, 30px)</button>
    </view>
    <view class="btn-line">
      <button type="primary" bind:tap="moveStep" class="btn sec-btn">点击移动到({{x + 10}}px, {{y + 10}}px)</button>
    </view>
  </view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">只可以横向移动</view>
  <view class="area-wrap">
    <movable-area class="area">
      <movable-view class="block" direction="horizontal">text</movable-view>
    </movable-area>
  </view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">只可以纵向移动</view>
  <view class="area-wrap">
    <movable-area class="area">
      <movable-view class="block" direction="vertical">text</movable-view>
    </movable-area>
  </view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">可超出边界</view>
  <view class="area-wrap">
    <movable-area class="area">
      <movable-view class="block" direction="all" out-of-bounds="true">text</movable-view>
    </movable-area>
  </view>
</view>

JS
Page({
  data: {
    x: 0,
    y: 0,
  },
  // 移动到30px,30px
  moveFn() {
    this.setData({
      x: 30,
      y: 30,
    });
  },
  moveStep() {
    const x = this.data.x + 10;
    const y = this.data.y + 10;
    this.setData({
      x,
      y,
    });
  },
});

TYSS
.page-section {
  width: 100%;
  margin-bottom: 30px;
}
 
.area-wrap {
  display: flex;
  justify-content: space-around;
}
 
.area {
  flex: none;
  height: 200px;
  width: 200px;
  margin: 10px;
  background-color: #ccc;
  overflow: hidden;
}
 
.block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  background: var(--ty-native-primary-color);
  color: #fff;
}
 
.btn-line {
  text-align: center;
}
 
.btn-line .btn {
  display: inline-block;
  width: 240px;
}
 
.btn-line .sec-btn {
  margin-top: 10px;
}

movable-view

可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。 

属性说明

属性类型默认值必填说明
directionstringnone否movable-view 的移动方向，属性值有 all、vertical、horizontal、none
inertiabooleanfalse否movable-view 是否带有惯性
out-of-boundsbooleanfalse否超过可移动区域后，movable-view 是否还可以移动
xnumber0否定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围。改变 x 的值会触发动画
ynumber0否定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围。改变 y 的值会触发动画
dampingnumber20否阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快
frictionnumber2否摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值
disabledbooleanfalse否是否禁用
scalebooleanfalse否是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内
scale-minnumber0.5否定义缩放倍数最小值
scale-maxnumber10否定义缩放倍数最大值
scale-valuenumber1否定义缩放倍数，取值范围为 0.5 - 10
animationbooleantrue否是否使用动画
bind:changeeventhandle否拖动过程中触发的事件，event.detail = {x, y, source}
bind:scaleeventhandle否缩放过程中触发的事件，event.detail = {x, y, scale}

bind:change 返回的 source 表示产生移动的原因

值说明
touch拖动
touch-out-of-bounds超出移动范围
out-of-bounds超出移动范围后的回弹
friction惯性
空字符串setData

注意事项

tip: movable-view 必须设置 width 和 height 属性，不设置默认为 10px tip: movable-view 默认为绝对定位，top 和 left 属性为 0px。

page-container

 页面容器。用于实现类似 popup 弹出层的效果，可以通过控制 show 属性来实现显示/隐藏。

功能描述

页面容器。

小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层。

页面内存 page-container 时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。

容器版本 2.3.0+ 以上支持

注意：当页面状态触发 page-container 显示隐藏时，开发者需在 page-container 离开视图的相关事件中，将控制 page-container 的状态设置为 false，否则可能会影响再次打开 page-container。

属性说明

属性类型默认值必填说明
showbooleanfalse否是否显示容器组件
durationnumber300否动画时长，单位毫秒
z-indexnumber100否z-index 层级
overlaybooleantrue否是否显示遮罩层
positionstringbottom否弹出位置，可选值为 top bottom right center
roundbooleanfalse否是否显示圆角
overlay-stylestring否自定义遮罩层样式
custom-stylestring否自定义弹出层样式
bind:beforeentereventhandle否进入前触发
bind:entereventhandle否进入中触发
bind:afterentereventhandle否进入后触发
bind:beforeleaveeventhandle否离开前触发
bind:leaveeventhandle否离开中触发
bind:afterleaveeventhandle否离开后触发
bind:clickoverlayeventhandle否点击遮罩层时触发

示例代码

TYML
<view class="title">弹出位置</view>
<view class="box">
  <button class="btn" bind:tap="popup" data-position="right">右侧弹出</button>
  <button class="btn" bind:tap="popup" data-position="top">顶部弹出</button>
  <button class="btn" bind:tap="popup" data-position="bottom">底部弹出</button>
  <button class="btn" bind:tap="popup" data-position="center">中央弹出</button>
</view>
 
<view class="title">弹窗圆角</view>
<view class="box">
  <button class="btn" bind:tap="changeRound">设置{{round ? '直角' : '圆角'}}</button>
</view>
 
<view class="title">遮罩层</view>
<view class="box">
  <button class="btn" bind:tap="changeOverlay">设置{{overlay ? '无' : '有'}}遮罩</button>
  <button class="btn" bind:tap="changeOverlayStyle" data-type="black">黑色半透明遮罩</button>
  <button class="btn" bind:tap="changeOverlayStyle" data-type="white">白色半透明遮罩</button>
  <button class="btn" bind:tap="changeOverlayStyle" data-type="blur">模糊遮罩</button>
</view>
 
<page-container
  style="height: 500px"
  show="{{show}}"
  round="{{round}}"
  overlay="{{overlay}}"
  duration="{{duration}}"
  position="{{position}}"
  close-on-slide-down="{{false}}"
  bind:beforeenter="onBeforeEnter"
  bind:enter="onEnter"
  bind:afterenter="onAfterEnter"
  bind:beforeleave="onBeforeLeave"
  bind:leave="onLeave"
  bind:afterleave="onAfterLeave"
  bind:clickoverlay="onClickOverlay"
  custom-style="{{customStyle}}"
  overlay-style="{{overlayStyle}}"
>
  <view class="detail-page">
    <button type="primary" bind:tap="exit">推出</button>
  </view>
</page-container>

JS
Page({
  data: {
    show: false,
    duration: 300,
    position: 'right',
    round: false,
    overlay: true,
    customStyle: '',
    overlayStyle: '',
  },
  onLoad: function () {},
  onShow() {},
 
  popup(e) {
    const position = e.currentTarget.dataset.position;
    let customStyle = '';
    let duration = this.data.duration;
    switch (position) {
      case 'top':
      case 'bottom':
        customStyle = '';
        break;
      case 'right':
        break;
    }
    this.setData({
      position,
      show: true,
      customStyle,
      duration,
    });
  },
 
  changeRound() {
    this.setData({ round: !this.data.round });
  },
 
  changeOverlay() {
    this.setData({ overlay: !this.data.overlay, show: true });
  },
 
  changeOverlayStyle(e) {
    let overlayStyle = '';
    const type = e.currentTarget.dataset.type;
    switch (type) {
      case 'black':
        overlayStyle = 'background-color: rgba(0, 0, 0, 0.7)';
        break;
      case 'white':
        overlayStyle = 'background-color: rgba(255, 255, 255, 0.7)';
        break;
      case 'blur':
        overlayStyle =
          'background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);';
    }
    this.setData({ overlayStyle, show: true });
  },
 
  exit() {
    this.setData({ show: false });
  },
 
  onBeforeEnter(res) {
    console.log(res);
  },
  onEnter(res) {
    console.log(res);
  },
  onAfterEnter(res) {
    console.log(res);
  },
  onBeforeLeave(res) {
    console.log(res);
  },
  onLeave(res) {
    console.log(res);
    this.setData({ show: false });
  },
  onAfterLeave(res) {
    console.log(res);
  },
 
  onClickOverlay(res) {
    this.setData({
      show: false,
    });
  },
});

TYSS
.box {
  margin: 0 20px;
}
 
.title {
  margin: 0;
  padding: 32px 16px 16px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
 
.btn {
  display: block;
  width: 100%;
  margin: 10px 0;
  background-color: #fff;
}
 
.detail-page {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

cover-view

基础库 2.7.0 开始支持, 低版本需做兼容处理。

功能描述

覆盖在原生组件之上的文本视图。

Bug & Tip

  1. tip: 需在原生组件上覆盖其它组件, 且该组件不作为原生组件子节点时, 必须在最外层使用 cover-view 包裹住, 其它场景不建议使用cover-view
  2. tip: 不要嵌套使用 cover-view , cover-view 只作为覆盖在原生组件之上的包裹标签使用
  3. tip: 不要作为原生组件子节点使用
  4. tip: 建议cover-view 子节点不要溢出父节点

示例代码

TYML
<view class="container">
  <map style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}"></map>
  <cover-view class="cover-view">
    <view class="flex-wrp" style="flex-direction:row;" bindtap="coverTap">
      <view class="flex-item demo-text-1"></view>
      <view class="flex-item demo-text-2"></view>
      <view class="flex-item demo-text-3"></view>
    </view>
  </cover-view>
</view>

JS
Page({
  data: {
    latitude: 23.099994,
    longitude: 113.32452,
  },
  coverTap(e) {
    console.log(e);
  },
});

CSS
.container {
  position: relative;
}
 
.cover-view {
  position: absolute;
  top: calc(50% - 150rpx);
  left: calc(50% - 300rpx);
}
 
.flex-wrp {
  display: flex;
}
 
.flex-item {
  width: 200rpx;
  height: 300rpx;
  font-size: 26rpx;
}
 
.demo-text-1 {
  background: rgba(26, 173, 25, 0.7);
}
 
.demo-text-2 {
  background: rgba(39, 130, 215, 0.7);
}
 
.demo-text-3 {
  background: rgba(255, 255, 255, 0.7);
}
IoT砖家涂拉拉
关注
  • 31
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CKEditor-Widget-Customize:CKEditor小部件+拖放集成
05-15
CKEditor-Widget-自定义 CKEditor小部件+拖放集成
Widget UI介绍
09-23
基于NOKIA平台的WRT Widget。内容包括Widget UI，Widget简介，Widget功能扩展，Widget开发实用包介绍。
【Qt常用控件】—— QWidget 核心属性
最新发布
m0_56069910的博客
04-22 1252
QWidget 核⼼属性
Widget小组件
qq_25303213的博客
01-16 3871
Widget小组件开发须知 1、只能使用SwiftUI进行开发，所以需要SwiftUI和Swift基础 2、Widget只支持3种尺寸systemSmall(2x2)、systemMedium(4x2)、systemLarge(4x4) 3、默认点击Widget打开主应用程序 4、需要在项目中进行App Groups的设置才能使其与主程序互通数据
一文掌握android小组件（AppWidget）开发
ayugezhoubing的博客
03-09 5561
一文掌握android桌面小组件开发
Android桌面小组件---Widget组件开发（什么是Widget）
qq_33235287的博客
01-30 8168
1.Android Widget
[SwiftUI 开发] Widget 小组件
u010130947的专栏
01-05 5395
小组件可以在主屏幕上实现内容展示和功能跳转。系统会向小组件获取时间线，根据当前时间对时间线上的数据进行展示。点击正在展示的视觉元素可以跳转到APP内，实现对应的功能。小组件是一个独立于 App 环境(即 App Extension)，小组件的生命周期/存储空间/运行进程都和 App 不同。​​​​​​​App Extension 可以将自定义功能和内容扩展到应用程序之外，并在用户与其他应用程序或系统交互时向用户提供。例如，您的应用可以在主屏幕上显示为小部件。
安卓Widget小组件相关-Android小部件AppWidget.rar
07-29
这个压缩包“Android小部件AppWidget.rar”似乎包含了一些关于创建和实现Android Widget小组件的资源，可能是源代码、文档或者示例项目。 在Android开发中，AppWidget是Widget小组件的主要实现类。它是由Android ...
安卓Widget小组件相关-androidWidget小组件开发.zip
07-29
本资料包"androidWidget小组件开发.zip"包含了一个名为"MyWidget"的示例项目，可能包含了关于如何创建和实现Android Widget小组件的代码和资源。 1. **Widget组件概述** - Android Widget是Android系统中的一个...
安卓Widget小组件相关-Widget安卓桌面小组件.rar
07-29
安卓Widget，又称为桌面小部件，是安卓应用可以创建的迷你应用程序视图，用户可以直接在手机或平板电脑的主屏幕上放置，而无需打开完整的应用。这些小组件可以显示天气、日历事件、音乐控制等信息，极大地提高了用户...
安卓Widget小组件相关-WidgetTest.zip
07-29
【Android Widget小组件详解】 Android Widget是Android系统中一种特殊的应用组件，允许开发者在用户的主屏幕上提供快捷操作或信息展示。这些小组件虽然不像应用程序那样全功能，但它们提供了便捷的交互方式，使得...
Android- Widget (应用微件/小组件/插件) 使用介绍
Android_XG的博客
01-27 3606
一、概念： App Widget 即叫 应用微件 或者 小组件/插件. 是可以嵌入其他应用（如主屏幕）并 接收定期更新的微型应用视图。 这些视图称为界面中的微件. 例如，添加到桌面上的音乐Widget: app_widget_music_sample.PNG 能够容纳其他应用微件的应用组件称为 AppWidgetHost (应用微件托管应用)。 App 通过传递要显示布局id 给RemoteViews, 即可以获取Widget的实例对象. 官网介绍： 指南：https://developer.androi
安卓程序开发——widget组件开发Widget就是可以放在桌面上的组件，包括像天气、便签、等。AppWidget 框架类练习Widget组件的基础应用、widget的配置、widget与服务结合实现
WZY22502701的博客
11-05 2106
掌握Android widget组件的应用，练习Widget组件的基础应用、widget的配置、widget与服务结合实现时间倒计时。
Android Widget小组件开发（一）——Android实现时钟Widget组件的步骤开发，这些知识也是必不可少的！...
weixin_34186950的博客
02-19 643
Android Widget小组件开发（一）——Android实现时钟Widget组件的步骤开发，这些知识也是必不可少的！ PS：学习自某网站(不打广告) 这个小组件相信大家都很熟悉吧，以前的墨迹天气的时候我也经常用，现在好像很少有软件用了，个人感觉吧…他对于一个用户而言来说是十分方便，快捷的，而且我们可以定制一些各种各...
桌面widget详解（三）——桌面widget中的控件交互方法
启舰
11-29 8972
前言：其实桌面widget桌面交互也是一个大坑，我在开发中遇到了真是一个又一个的问题，其中问题很多，主要原因还是android对widget的支持不够完美，比如remoteView传送数据太大就会崩等，无缘无故widget不响应等等，但在开发中逐渐琢磨，解决方法总还是有的，另外，我答应了一个在线授课机构录一些android视频，想必过不久大家就可以看到我讲的视频了，免费观看哦。当然也只能听到我的声...
Widget—小部件 学习（踩坑篇）
chuyouyinghe的专栏
09-15 330
通过运行效果，我们可以看到点击加减法都是有效果的，证明广播是接受到了，但是TextView显示的数据有问题，当小组件创建时，显示为0，点击“+”也确实变成了1，但再点击却不会再有变化，一直显示1。所以我想到的解决方案就是在CalculateService中再创建一个广播接收者，这个广播接收者接收的广播由CalculateProvider的onReceive()中发送，也就是我先在onReceive中判断是点击了哪个按钮，然后再发出对应的广播。我一开始也是这么想的，那么接下来就来看一下我最开始是如何实现的。
常用widget组件介绍
wtao158的专栏
12-29 3022
常用widget组件介绍注意：如果新增加了Activity，那么一定要在AndroidManifest.xml里增加以下：1 Button按钮应用：   (1)在UI里显示Button(在xml里配置Button标签)   (2)在activity里设置此Button的单击监听器，并且在监听器里面完成要实现的功能      设置单击监听器：设置单击监听器，获取Button，将监听器设置到Butto
Flutter开发入门——Widget和常用组件
Android 领域开发程序员，希望通过写博客的方式不断的总结提升自己，大家共同进步哦！
03-14 1812
1、什么是Widget？在Flutter中几乎所有的对象都是一个 widget。与原生开发中“控件”不同的是，Flutter 中的 widget 的概念更广泛，它不仅可以表示UI元素，也可以表示一些功能性的组件如：用于手势检测的、用于APP主题数据传递的Theme等等，而原生开发中的控件通常只是指UI元素。可以说，万物皆可Widget。用于不需要维护状态的场景，它通常在build方法中通过嵌套其他 widget 来构建UI，在构建过程中会递归的构建其嵌套的 widget。
Flutter第三弹：常用的Widget
joedan0104的专栏
03-08 997
目标：1）常用的Widget有哪些？有什么特征？2）开发一个简单的登录页面。
Android开发：Widget组件通用属性详解
"Widget组件通用属性，Android开发教程，用户界面设计，XML布局，Java代码，View类，事件驱动机制，Layout，Widget组件，菜单，对话框，Toast，视图组件，视图容器，事件监听器" 在Android开发中，构建用户界面是至...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IoT砖家涂拉拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值