概念介绍

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

实现方法

整体思路

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

具体步骤

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

创建GridView组件，并且给它的gridDelegate属性和children属性赋值；
在gridDelegate属性中设置主轴中子组件的数量，宽高比，以及组件之间的边距；
在children属性中通过List设置子组件，子组件是TextButton，上面显示List的索引值；
在TextButton的onPressed属性中通过日志打印出数值，这个数值是当前元素在列表中的索引值；
在TextButton外面包一个Container组件，用来控制背景颜色，颜色使用随机数生成，这样会产生不同的颜色；
在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)),);
        }),
      ),
    );
  }
}