使用栅格布局超出宽度为什么会有横向滑块

栅格布局是一种基于网格系统的布局方式，它将页面划分为多个列和行，可以方便地对页面进行布局。当使用栅格布局时，如果内容超出了容器的宽度，就会出现横向滑块。这是因为栅格布局中的列有固定的宽度，当内容超出列的宽度时，就会溢出到下一列或者下一行，导致容器的宽度增加，从而出现滑块。为了避免这种情况，可以使用响应式设计或者调整栅格布局中列的宽度，使其适应不同的屏幕大小和设备。

相关问题

那超出部分，会有横向滚动条吗

是的，如果横向排列的 GridView 的子项超出了屏幕宽度，那么会自动出现横向滚动条。如果你想要控制滚动条的出现和隐藏，可以在布局文件中设置属性 android:scrollbars 为 horizontal，然后在 Java 代码中调用 setHorizontalScrollBarEnabled() 方法来控制。下面是一个示例代码：

<GridView
    android:id="@+id/grid_view"
    android:numColumns="auto_fit"
    android:columnWidth="100dp"
    android:stretchMode="columnWidth"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:scrollbars="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

GridView gridView = findViewById(R.id.grid_view);
gridView.setNumColumns(GridView.AUTO_FIT);
gridView.setColumnWidth(100);
gridView.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);
gridView.setOrientation(GridView.HORIZONTAL);
gridView.setHorizontalScrollBarEnabled(false); // 隐藏滚动条

flex横向布局固定宽度

在flex布局中，如果要实现横向滚动菜单栏并固定子元素的宽度，可以按照以下步骤进行设置：

1. 在父元素上设置flex布局，并使用`align-items: center`来使子元素在垂直方向上居中对齐。
2. 使用`overflow-x: auto`来实现横向滚动效果。
3. 在子元素上使用`flex-shrink: 0`来禁止子元素缩小。
4. 设置子元素的固定宽度和高度，可以使用`width`和`height`属性进行设置。
5. 可以根据需要设置子元素的间距、文本对齐方式、边框等样式。

以下是一个示例的CSS代码：

.title-list {
  display: flex;
  align-items: center;
  overflow-x: auto;
  height: 110px;
}

.item {
  flex-shrink: 0;
  width: 160px;
  height: 50px;
  margin: 30px 20px;
  text-align: center;
  border-radius: 25px;
}

.item-title-active {
  background: rgba(0, 144, 171, 1);
}

.item-title-disabled {
  background: rgba(255, 255, 255, 0.1);
}

在HTML中，可以使用`v-for`指令来循环生成子元素，并根据条件动态添加类名来实现选中效果。以下是一个示例的HTML代码：

<div class="title-list">
  <div :class="selItem == item ? 'item-title item-title-active' : 'item-title item-title-disabled'" v-for="item in dataList" :key="item" @click="selectItem(item)">
    <div class="text">视频名称</div>
  </div>
</div>

通过以上设置，可以实现一个具有固定宽度的横向滚动菜单栏。