韦恩：AI应用卡点：容器布局

韦恩：AI应用卡点：容器布局 韦恩：AI应用卡点：容器布局 Modified December 31, 2024 4、容器布局实战 最后给大家做个布局示例 4.1、纵向布局 导航栏固定高度，内容自适应搞高度 4.2、横向布局1 两个子容器，宽度自适应 4.3、横向布局2 左侧固定宽度，右侧自适应 三、关于作者 大家好，我是韦恩，现在提供AI智能体定制、AI工作流定制、AI课程合作定制等服务，同时我也承接各种传统软件开发项目，欢迎大家推荐项目、定制项目。 产品展台：https://link3.cc/readgo666 公众号求个关注 4、容器布局实战 最后给大家做个布局示例 4.1、纵向布局 导航栏固定高度，内容自适应搞高度 4.2、横向布局1 两个子容器，宽度自适应 4.3、横向布局2 左侧固定宽度，右侧自适应 三、关于作者 大家好，我是韦恩，现在提供AI智能体定制、AI工作流定制、AI课程合作定制等服务，同时我也承接各种传统软件开发项目，欢迎大家推荐项目、定制项目。 产品展台：https://link3.cc/readgo666 公众号求个关注 🎨 作者：韦恩 作者：韦恩 一、卡点 在扣子平台中，新出的AI应用有很大的想象空间，很多朋友都很兴奋。拖拉拽式的方式去DIY应用，看着很好玩，官方给的模板也很漂亮，甚至有人用AI应用做了个豆包网页版出来。 不过，很快大家就遇到了卡点，这个卡点就是容器布局，别人做的很美，到自己，怎么做怎么丑，一层套一层，一会儿就把自己给套迷糊了。 二、问题解决 今天就给大家解决这个问题，搞懂容器布局。 1、打基础 需要先构建一个基础的容器 新建一个AI应用，选择PC页面 放一个容器到页面上，完整覆盖Page1 设置Page1，内边距和间距都为0 设置容器(Div1) 这样设置完成之后，我们就得到了一个基本的页面，宽度1200，高度900的容器，这个页面使用了固定高度，这是为了后面排版方便，假如我们这里使用了填充容器、百分比、适应高度等，那可能会导致我们的界面变形，展不开等问题。后面的所有布局都在这个Div1里进行。 可能有人会问，页面本身高度不就是1200 900吗？为什么还要加这一层，这是因为页面Page1本身并没有可以设置宽高的地方，这就会在预览的时候发现，页面组件会铺满屏幕，拉伸变形，很难看，所以才有了上面的方法——固定高度。 2、讲解布局 布局的三种：纵向、横向、换行，先说明，再举例。 2.1、说明 • 纵向是默认布局，容器内的子容器纵向排列，直观看就是从上往下排列，横向只有一列，或宽或窄。 • 横向是横向布局，容器内的子容器横向排列，质管科就是从左往右排列，纵向只有一行，或高或低。 • 换行，这里理解为横向布局的扩展，常用于多个组件高度相似，宽度不定，比如多个固定按钮，当一行放不下所有按钮的时候，可以自动换行，布局也很优雅。 2.2、举例 • 纵向布局： • 横向布局： • 换行布局 有人会问，为啥换行布局和纵向布局效果是一样的，这是因为子容器的默认宽度是50%，两个子容器就占满了一行，但是他们直接还有个10的间距，所以导致了换行，这时候改一下Div3的宽度就可以看出换行了。 3、理解布局怎么用 知道了三种布局，页面依然丑，接下来是重点。 我们在做应用页面的时候，首先要做一个页面的分析，这个页面（容器）是怎么占满一行（一列）的。 举几个例子： 3.1、纵向布局 红色框内容比较明显独占一列，这一层就是纵向布局，两个子容器，一红一绿 这时候适合固定顶部红框的高度，下面绿框的高度使用填充容器 3.2、横向布局 三个红色框都是独占一列的，那这时候他们就适合横向布局。 这个时候适合左右固定宽度，中间子容器填充宽度 3.3、子容器嵌套布局 在灰框里的1、2、3子容器，1是固定内容，应是固定高度，2是动态内容，较少，用适应内容，3是动态内容，较多，填充容器