第八十八回：创建一个调色板

我们在上一章回中介绍了打印日志相关的内容，本章回中将介绍 如何创建一个调色板.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在本章回中介绍的调色板是一个具有各种颜色的窗口，点击不同的颜色就会输出不同的数值。这么介绍比较抽象，下面是程序的运行效果图。

实现方法

整体思路

使用GridView创建网格状的布局，布局中的每个小组件充当调色板中的某一个颜色板，颜色板的数量由List控制，颜色使用随机数生成；各个颜色板之间保持一定的间隔，这样便于识别。颜色板可以被选择或者点击，点击后可以获得响应。

具体步骤

调色板主要是通过GridView实现的，重点是它的gridDelegate属性，通过该属性可以控制调色板整体的形状与布局。下面是具体的实现方法：

1. 创建GridView组件，并且给它的gridDelegate属性和children属性赋值；
2. 在gridDelegate属性中设置主轴中子组件的数量，宽高比，以及组件之间的边距；
3. 在children属性中通过List设置子组件，子组件是TextButton，上面显示List的索引值；
4. 在TextButton的onPressed属性中通过日志打印出数值，这个数值是当前元素在列表中的索引值；
5. 在TextButton外面包一个Container组件，用来控制背景颜色，颜色使用随机数生成，这样会产生不同的颜色；
6. 在GridView组件外面包一个Padding组件，主要用来控制画板左右的两边的边距，边距值与子组件之间的边距值相等；

示例代码

///使用GirdView的构造方法创建GirdView,主要是gridDelegate属性是必选属性
class ColorPaletteByGridView extends StatelessWidget {
  const ColorPaletteByGridView({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      ///list中无法添加最左和最右侧的边距，通过padding添加
      // padding: const EdgeInsets.all(8.0),
      padding: const EdgeInsets.only(left: 8.0,right: 8.0),
      child: GridView(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          ///主轴中组件的数量
          crossAxisCount: 3,
          ///宽高比
          childAspectRatio: 1.8,
          ///主轴和交叉轴的边距
          mainAxisSpacing: 8,
          crossAxisSpacing: 8,
        ),
        children: List.generate(45, (index) {
          return Container(
            child: Center(
              ///使用按钮来响应事件
              child: TextButton(
                onPressed: ()=>print('$index clicked'),
                ///文本使用索引值
                child: Text('$index',style: TextStyle(color: Colors.white),),),
            ),
            ///颜色使用随机数生成
            color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),);
        }),
      ),
    );
  }
}

上面的代码把整个实现过程封装成了一个Widget，这样方便项目管理，把该Widget赋值给Scaffold的body属性后就可以运行。我们在代码中添加了详细的注释，方便大家理解代码，不过还有一些细节需要补充：

• gridDelegate属性控制了整个GridView的整体布局风格，具体的需求由项目决定；
• GridView的子组件可以依据项目需求决定，简单起见，示例代码中使用了TextButton;
• 子组件之间的边距值和GridView左右两侧的边距值依据项目需求决定，不过最好让它们保持相等；

看官们，关于"如何创建调色板"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!