前言

我们在日常餐的过程中，餐饮店经常会使用餐饮小程序来管理台位，来控制每桌的餐或者空闲状态。一般是餐桌上进行扫码点餐，在PC端来控制收费。

本篇教程，我们结合这个实际的业务场景，利用微搭低代码工具来实现对餐桌状态的一个管理。

实现的效果

我们页面上通过两个按钮来控制餐桌的状态，开台让餐桌变成餐的状态，并且设置一个红色的背景。点击闭台让餐桌变成空闲的状态，并且设置一个绿色的背景。

实现的思路

要想控制餐桌的状态，可以通过一个布尔值变量来控制，通过变量的真假来显示餐桌的状态。

点击变量，创建一个布尔值类型的变量

至于颜色的话，我们可以定义一个object类型的变量，并且给赋予一个初始绿色的背景值

我们点击按钮的时候做颜色改变和状态改变，可以定义两个低码方法

开餐的低码让背景色变成红色，并且状态置为true

闭餐我们让背景色设置为绿色，并且状态赋值为false

组件开发及事件绑定

基础工作做好之后，我们实现页面的效果，先放置一个普通容器，里边放置两个按钮

普通容器设置一下样式，让按钮在一行显示

然后给两个按钮分别绑定刚才定义好的开餐方法和闭餐方法

然后再放置一个普通容器，里边放置三个文本组件

个文本设置文本内容为餐桌的台号

第二个文本将文本内容设置为餐中

我们设置一下条件显示，绑定为我们刚刚定义的变量flag

第三个文本设置为空闲中，条件展示使用表达式用来取反，这样可以控制状态的切换了

在js里使用叹号表示取反的意思，我们这里flag是布尔类型，如果值为真取反之后是假。如果值为假取反之后值是真。像电灯的开关一样，我们按下是开灯，再按一下是关灯。这里的逻辑也是和这个一样，通过变量的赋值来决定哪个文本组件显示。

后一个效果是背景色了，我们可以给普通容器设置一个样式变量，这样来控制颜色的变化。

一般我们的样式文件是这样的

样式是通过类型选择器来定义，里边是属性的名称和属性的值，只不过样式的设置我们是在低代码里赋值完成的。这样实现了我们终的效果。

还在被样式动态设置困扰的小伙伴看看这一篇介绍吧，希望对你有一点帮助。