文章目录
- 概念介绍
- 实现方法
- 整体思路
- 具体步骤
- 示例代码
我们在上一章回中介绍了打印日志相关的内容，本章回中将介绍 如何创建一个调色板.闲话休提，让我们一起Talk Flutter吧。
概念介绍
我们在本章回中介绍的调色板是一个具有各种颜色的窗口，点击不同的颜色就会输出不同的数值。这么介绍比较抽象，下面是程序的运行效果图。
实现方法
整体思路
使用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,});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左右两侧的边距值依据项目需求决定，不过最好让它们保持相等；
看官们，关于"如何创建调色板"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!
)
