android - 我们如何使用圆形复选框制作网格视图并在颤动中选择颜色
解决方案
colorsData
您可以根据需要将颜色添加到列表中
这对你有帮助,
void main() => runApp(MainPage());
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp (
debugShowCheckedModeBanner: false,
home:Demo(),
);
}
}
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
List colorsData = [Colors.green,Colors.red,Colors.greenAccent,Colors.cyan,Colors.purple,Colors.yellow,Colors.blue,Colors.black,Colors.brown,Colors.orange, Colors.teal, Colors.purpleAccent, Colors.blueGrey, Colors.tealAccent, Colors.deepOrangeAccent, Colors.lightBlueAccent];
int selectedColor = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Color picker"),
),
body: new Container(
padding: EdgeInsets.all(16.0),
color: Colors.black12,
child: GridView.builder(
scrollDirection: Axis.vertical,
itemCount: colorsData.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4 ,childAspectRatio:1),
itemBuilder: (BuildContext context,int index){
return Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Column(
children: <Widget>[
new FloatingActionButton(
onPressed: (){
setState(() {
selectedColor = index;
});
},
child: Icon(Icons.done,color: index == selectedColor ? Colors.white :colorsData.elementAt(index),size: 28),
backgroundColor: colorsData.elementAt(index),
elevation: 0.0,
heroTag: null,
),
Offstage(
offstage: index != selectedColor,
child: Text("Color Name"),
),
],
),
);
},
shrinkWrap: true,
),
)
);
}
}
要显示颜色名称,请更改 Text 静态值 instedColor Name
分配适当的颜色名称
推荐阅读
- python - mariadb.ProgrammingError:SQL 语法错误 INSERT INTO 问题与 (%s/?)
- powershell - 尝试创建删除电子邮件 powershell 脚本
- azure - 使用托管标识启动 Azure VM Runbook
- python - 从一个大的 json 变量到对象
- android - Android Studio 中使用 Flutter 作为主页的小部件导致的未实现错误?
- typescript - 动态对象属性的打字稿动态联合类型
- laravel - Laravel scout tnt search 索引时出错
- php - Boost::log 标准输出仅在从 bash 脚本调用时显示
- javascript - 使用 Angular CLI 混合 AngularJS 和 Angular。示例代码的导入错误
- matlab - 在并行模式下运行时的 Simulink 测试迭代问题