저는 Dart와 Flutter 프레임 워크를 처음 사용합니다. 현재 25 개의 버튼으로 채워진 GridView가 있습니다. 기본적으로 각 버튼에는 주황색 배경색이 있습니다. 그러나 사용자에게 아무 버튼이나 길게 누를 수있는 옵션을 제공하고 싶습니다. 그러면 PopUpMenu가 표시되어 버튼에 대해 다른 색상을 선택할 수있는 옵션을 제공합니다. 다음은 내가 시도한 두 가지입니다.
이 문제를 해결하려면 어떻게해야합니까? 도움을 드리기 위해 아래 코드 스 니펫을 포함하고 있습니다. 이 코드는 # 2가 구현 된 방법을 나타냅니다.
25 버튼 인스턴스화 :
// Random number generator
var _randGen = new Random();
//List of maze cards
List<Widget> mazeCards = new List();
// Generate cards until it has 25 cards within the list
while(mazeCards.length != 25)
{
// Get the index
var _currIndex = _randGen.nextInt(words.length);
// Add the card to the list
var _cardColor = Colors.orange;
mazeCards.add(createCard(words[_currIndex], _cardColor));
}
createCard 메소드 :
Widget createCard(String someString, Color _cardColor)
{
return GestureDetector(
onTapDown: _storePosition,
child: Container(
padding: EdgeInsets.all(8.0),
child:
_createButton(someString, _cardColor)
),
);
}
createButton 메서드 :
Widget _createButton(String someString, Color _cardColor)
{
Widget newButton = MaterialButton(
padding: EdgeInsets.all(50.0),
color: _cardColor,
onPressed: () => _printButtonText(someString),
onLongPress: () {
cardOptionsMenu(_cardColor);
},
textTheme: ButtonTextTheme.primary,
//_someColor(),
child: Text(someString)
);
return newButton;
}
cardOptionsMenu 메소드 :
void cardOptionsMenu(Color _cardColor)
{
final RenderBox overlay = Overlay.of(context).context.findRenderObject();
showMenu(
context: context,
...
)
.then<void>((CardOptionEnum cardOption) {
if (cardOption == null) return;
else{
switch (cardOption)
{
case CardOptionEnum.makeBlackCard:
setState(() {
_cardColor = Colors.black;
});
break;
case CardOptionEnum.makeBlueCard:
setState(() {
_cardColor = Colors.blue;
});
break;
case CardOptionEnum.makeRedCard:
setState(() {
_cardColor = Colors.red;
});
break;
case CardOptionEnum.makeYellowCard:
setState(() {
_cardColor = Colors.yellow;
});
break;
case CardOptionEnum.changeWord:
break;
}
}
});
}
List<int> items = [];
List<Color> colors = [];
@override
void initState() {
super.initState();
items = List.generate(25, (ind) => ind).toList();
colors = List.generate(25, (ind) => Colors.orange).toList();
}
@override
Widget build(BuildContext context) {
return GridView.builder(
itemCount: items.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (con, ind) {
return InkWell(
child: Card(child: Text('${items[ind]}',
style:TextStyle(color:Colors.white),
textAlign:TextAlign.center), color: colors[ind]),
onTap: () {
changeColor(ind);
});
});
}
void changeColor(index) {
showDialog(
context: context,
builder: (con) {
return AlertDialog(
title: Text('Choose a color !'),
content: Column(mainAxisSize: MainAxisSize.min, children: [
ListTile(
title: Text('Blue'),
onTap: () {
Navigator.of(con).pop();
changeState(index, Colors.blue);
}),
ListTile(
title: Text('Red'),
onTap: () {
Navigator.of(con).pop();
changeState(index, Colors.red);
}),
ListTile(
title: Text('Green'),
onTap: () {
Navigator.of(con).pop();
changeState(index, Colors.green);
})
]),
);
});
}
void changeState(index, color) {
setState(() {
colors[index] = color;
});
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다