21 白板画笔的参数设置

1. 线粗选择器

如下所示，左下角可以选择线的粗细，激活状态通过蓝色线框表示。在选择之后，激活状态发生变化，绘制时线的宽度也会变化。这个选择器的构建逻辑相对独立，以后也有复用的可能，可以单独抽离为一个组件维护，这里创建 StorkWidthSelector 组件，并将其通过 Stack 组件叠放在画板之上：

线粗 = 1	线粗 = 8

通过选择器在界面上的展示效果，不难看出组件需要依赖的数据有：

• 支持的线宽列表 List<double>
• 激活索引 int
• 条目的颜色 Color
• 点击条目时的回调 ValueChanged<int>

类定义如下：

class StorkWidthSelector extends StatelessWidget {
  final List<double> supportStorkWidths;
  final int activeIndex;
  final Color color;
  final ValueChanged<int> onSelect;


  const StorkWidthSelector({
    Key? key,
    required this.supportStorkWidths,
    required this.activeIndex,
    required this.onSelect,
    required this.color,
  }) : super(key: key);

在组件构建逻辑中，主要是便历 supportStorkWidths 列表，通过 _buildByIndex 方法根据索引值构建条目。其中可以通过 index == activeIndex 来确定当前条目是否被激活；再通过激活状态确定是否添加边线：

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8),
    child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: List.generate(
          supportStorkWidths.length,
          _buildByIndex,
        )),
  );
}

Widget _buildByIndex(int index) {
  bool select = index == activeIndex;
  return GestureDetector(
    onTap: () => onSelect(index),
    child: Container(
      margin: const EdgeInsets.symmetric(horizontal: 2),
      width: 70,
      height: 18,
      alignment: Alignment.center,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          border: select ? Border.all(color: Colors.blue) : null),
      child: Container(
        width: 50,
        color: color,
        height: supportStorkWidths[index],
      ),
    ),
  );
}

最后通过 Stack + Positioned 组件，将 StorkWidthSelector 组件叠放在界面的右下角；并通过 _onSelectStorkWidth 作为选择的回调处理界面状态数据的变化逻辑：

处理逻辑很简单，只要更新 _activeStorkWidthIndex 激活索引即可；另外在 _onPanStart 创建 Line 对象时，设置激活线宽即可：

void _onSelectStorkWidth(int index) {
  if (index != _activeStorkWidthIndex) {
    setState(() {
      _activeStorkWidthIndex = index;
    });
  }
}

void _onPanStart(DragStartDetails details) {
  _lines.add(Line(
    points: [details.localPosition],
    // 使用激活线宽
    strokeWidth: supportStorkWidths[_activeStorkWidthIndex],
  ));
}

到这里，就完成了线条宽度的选择功能，当前代码位置 paper 。

2. 颜色选择器

颜色选择器的原理也是一样，选择激活，在创建 Line 对象时设置颜色。只不过是条目的界面表现不同罢了，条目的构建逻辑也是通过 _buildByIndex 实现的。这里通过圆圈也表示颜色，点击时激活条目，激活状态由外圈的圆形边线进行表示：

标题

class ColorSelector extends StatelessWidget {
  final List<Color> supportColors;
  final ValueChanged<int> onSelect;
  final int activeIndex;

  const ColorSelector({
    Key? key,
    required this.supportColors,
    required this.activeIndex,
    required this.onSelect,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8),
      child: Wrap(
          // crossAxisAlignment: CrossAxisAlignment.end,
          children: List.generate(
            supportColors.length,
            _buildByIndex,
          )),
    );
  }

  Widget _buildByIndex(int index) {
    bool select = index == activeIndex;
    return GestureDetector(
      onTap: () => onSelect(index),
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 2),
        padding: const EdgeInsets.all(2),
        width: 24,
        height: 24,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
            border: select ? Border.all(color: Colors.blue) : null
        ),
        child: Container(
          decoration: BoxDecoration(
              shape: BoxShape.circle,
            color: supportColors[index],
          ),
        ),
      ),
    );
  }
}

同理，在 _PaperState 中，颜色选择器也通过 Stack + Positioned 叠放在画板的左下角；点击回调时处理激活颜色索引数据的更新；以及创建 Line 对象时设置激活颜色：

void _onSelectColor(int index) {
  if (index != _activeColorIndex) {
    setState(() {
      _activeColorIndex = index;
    });
  }
}

void _onPanStart(DragStartDetails details) {
  _lines.add(Line(
    points: [details.localPosition],
    strokeWidth: supportStorkWidths[_activeStorkWidthIndex],
    color: supportColors[_activeColorIndex],
  ));
}

到这里，颜色选择和线宽选择功能就已经实现了，当前代码位置 paper 。但这里在布局上还有些问题，下面来分析处理一下。

3. 布局分析

这里通过 Positioned 将两块分别叠放在 Stack 的两侧，上面颜色少时没有什么问题。但如果颜色过多，可以发现这种方式的叠放会让后者把前者覆盖住

多颜色时	布局边界

在布局树中可以发现，默认情况下 Positioned 之下的约束为无限约束，也就是子组件想要多大都可以。所以子组件在竖直方向上没有约束，颜色太多时就会溢出的原因。

解决方案方案有很多，其中最简单的是指定 Positioned 组件的 width 参数，在水平方向施加紧约束。如下所示，可以限制 ColorSelector 的宽度等于 240。 ColorSelector 内部通过 Wrap 进行构建，在区域之内会自动换行：

Positioned(
  bottom: 40,
  width: 240, 
  child: ColorSelector(
    supportColors: supportColors,
    activeIndex: _activeColorIndex,
    onSelect: _onSelectColor,
  ),
),

通过布局查看器可以看出，此时 ColorSelector 受到的约束宽度就固定在 240。

另外，我们还可以将 Positioned 提供的约束尺寸设为屏幕宽度，通过 Row 来水平排列，其中 ColorSelector 的宽度通过 Expanded 延展成剩余宽度。当前代码位置 paper

Positioned(
  bottom: 0,
  width: MediaQuery.of(context).size.width,
  child: Row(
    children: [
      Expanded(
        child: ColorSelector(
          supportColors: supportColors,
          activeIndex: _activeColorIndex,
          onSelect: _onSelectColor,
        ),
      ),
      StorkWidthSelector(
        supportStorkWidths: supportStorkWidths,
        color: supportColors[_activeColorIndex],
        activeIndex: _activeStorkWidthIndex,
        onSelect: _onSelectStorkWidth,
      ),
    ],
  ),
),

如果这里不提供 width ，而使用 Row + Expanded 组件的话，就会报错；根本原因是 Positioned 施加了无限约束，而 Row 使用了 Expanded 组件，延展无限的宽度区域是不被允许的：

通过这个小问题，带大家简单认识一下布局中约束的分析。很多布局上的问题，都可以从约束的角度解决。这里点到为止，如果对约束感兴趣，或有很多布局的困扰，可以研读一下我的布局小册: Flutter 布局探索 - 薪火相传

4. 本章小结

本章主要任务是完成白板画笔的参数设置，为用户提供修改颜色和线宽的操作，以便于绘制更复杂多彩的图案。从中可以体会出：新增加一个需求，往往会引入相关的数据来实现功能。比如对于修改颜色的需求，需要引入支持的颜色列表和激活的颜色索引两个数据。所以对于任何功能需求而言，不要只看其表面的界面呈现，更重要的是分析其背后的用户交互过程中的数据变化情况。

下一章，将继续对当前的画板项目进行一些小优化，比如支持回退和撤销回退的功能；以及优化一下点集的收集策略，来尽可能地避免收录过多无用点，减小绘制的压力。