Flutter实现左侧横向滚动区域与右侧固定按钮的布局方案

核心实现思路 #

• 外层容器用Flex布局，让左右区域横向排列
• 左侧滚动区域设置横向溢出滚动，占用容器剩余空间
• 右侧按钮区域禁止压缩，保持固定位置

HTML结构 #

<div class="container">
  <!-- 左侧可横向滚动区域 -->
  <div class="scroll-area">
    <div class="content-item">内容项1</div>
    <div class="content-item">内容项2</div>
    <div class="content-item">内容项3</div>
    <div class="content-item">内容项4</div>
    <div class="content-item">内容项5</div>
    <div class="content-item">内容项6</div>
    <div class="content-item">内容项7</div>
  </div>
  <!-- 右侧固定按钮区域 -->
  <div class="fixed-btn-area">
    <button>确认操作</button>
  </div>
</div>

CSS样式 #

.container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 900px; /* 可根据实际布局调整容器宽度 */
}

.scroll-area {
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
  padding: 12px;
}

.content-item {
  display: inline-block;
  width: 160px;
  height: 90px;
  background-color: #f5f5f5;
  margin-right: 12px;
  text-align: center;
  line-height: 90px;
  border-radius: 4px;
}

.fixed-btn-area {
  flex-shrink: 0; /* 禁止按钮区域被压缩 */
  padding: 0 15px;
}

.fixed-btn-area button {
  padding: 10px 20px;
  border: none;
  background-color: #165DFF;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

关键属性说明 #

• flex:1：让左侧滚动区域自动填充容器除右侧按钮外的所有可用空间
• overflow-x:auto：仅当内容超出左侧区域宽度时显示横向滚动条
• white-space:nowrap：确保左侧内容项保持横向排列，不自动换行
• flex-shrink:0：防止右侧按钮区域被挤压变形，始终保持原有宽度

内容的提问来源于stack exchange，提问作者gundam riteesh