概念介绍

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

实现方法

整体思路

使用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,});@overrideWidget 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)),);}),),);}
}