[英]Make Column in GridView Clickable in Flutter
我想讓我的 GridView 的各個列可點擊。 我不太明白如何使用 GestureDetector/InkWell 做到這一點。 我不明白如何訪問網格的一整列。
我該怎么做(如果這甚至可以使用 GridView)? 如果不可能,我能做到的最好方法是什么?
GridView.count(
crossAxisCount: 10,
children: List.generate(
50,
(_) {
return Container(
color: mainColor,
child: Container(
decoration: BoxDecoration(
color: Colors.white60,
shape: BoxShape.circle,
),
),
);
},
),
)
通過小時候使用InkWell
和一點數學:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final appTitle = 'Column selecion demonstration';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int selectedIndex = -1;
int columnsCount = 10 ;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: GridView.count(
crossAxisCount: columnsCount,
children: List.generate(
50, ( index ) {
return InkWell(
onTap: (){
setState(() {
if(selectedIndex != index){
selectedIndex = index ;
}else{
selectedIndex = -1 ;
}
});
},
child: Container(
color: (selectedIndex % columnsCount == index % columnsCount) && selectedIndex != -1 ? Colors.blue : Colors.yellow,
child: Container(
decoration: BoxDecoration(
color: Colors.white60,
shape: BoxShape.circle,
),
),
),
);
},
),
),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.