Flutter 定制视图：打造类似同花顺自选股列表的滚动选择器

Android

2023-10-15 21:50:08

在金融投资领域，同花顺自选股列表可谓广为人知。它允许用户创建和管理自己的股票组合，以便轻松跟踪其投资。该列表的一个显著特点是滚动选择器，用户可以在其中滚动浏览股票名称并快速选择所需股票。

在这个教程中，我们将指导您逐步构建一个类似的 Flutter 滚动选择器，您可以将其集成到自己的金融应用程序中。借助 Flutter 的强大功能，我们能够创建高度可定制的、交互式的组件，为您提供灵活性和创造力，满足您特定的应用程序需求。

设计概览

我们的自定义滚动选择器将包含以下关键元素：

根部堆叠 (Stack) ：作为选择器父容器，它将容纳所有其他元素。
黑色方块 : 位于根部堆叠左上角的固定黑色方块。
股票名称列表 : 填充根部堆叠主要区域的垂直列表，显示股票名称。
滚动选择条 : 一个水平滚动条，允许用户快速选择股票。

实现步骤

1. 根部堆叠

我们从创建一个根部堆叠开始，它将容纳所有其他元素。根部堆叠将占据整个可用屏幕空间，并在其上方绝对定位其他元素。

class CustomView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 其他元素将添加到此堆叠中
      ],
    );
  }
}

2. 黑色方块

黑色方块是一个相对定位在根部堆叠左上角的固定黑色方块。它的高度和宽度由我们指定。

Container(
  height: 30,
  width: 30,
  color: Colors.black,
)

3. 股票名称列表

股票名称列表是一个垂直列表，显示股票名称。它占据根部堆叠的主要区域，并使用 ListView.builder 构建，它允许我们动态生成列表项。

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return Text('股票名称 ${index + 1}');
  },
)

4. 滚动选择条

滚动选择条是一个水平滚动条，位于股票名称列表的顶部。它包含一个带有透明背景的 Slider，并使用 ValueListenableBuilder 监控 Slider 的值。

ValueListenableBuilder<double>(
  valueListenable: sliderValue,
  builder: (context, value, child) {
    return Slider(
      value: value,
      onChanged: (newValue) {
        sliderValue.value = newValue;
      },
      activeColor: Colors.transparent,
    );
  },
)

5. 集成

现在，我们将所有元素添加到根部堆叠中，并确保它们以正确的方式定位和对齐。

Stack(
  children: [
    // 黑色方块
    Positioned(
      top: 0,
      left: 0,
      child: Container(
        height: 30,
        width: 30,
        color: Colors.black,
      ),
    ),
    // 股票名称列表
    Positioned(
      top: 30,
      left: 0,
      right: 0,
      bottom: 0,
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          return Text('股票名称 ${index + 1}');
        },
      ),
    ),
    // 滚动选择条
    Positioned(
      top: 30,
      left: 0,
      right: 0,
      child: ValueListenableBuilder<double>(
        valueListenable: sliderValue,
        builder: (context, value, child) {
          return Slider(
            value: value,
            onChanged: (newValue) {
              sliderValue.value = newValue;
            },
            activeColor: Colors.transparent,
          );
        },
      ),
    ),
  ],
)