我已經使用ListView.builder，現在我想如果我點擊任何按鈕而不是只有那個按鈕顏色應該改變，但是當我點擊任何按鈕時，所有按鈕的顏色都會改變。
這是代碼
List<String> litems = ["Counter No 1", "Counter No 2", "Counter No 3", "Counter No 4"];
bool pressAttention=false;
Widget build(BuildContext context) {
return SafeArea(
child: SingleChildScrollView(
SizedBox(
height: MediaQuery.of(context).size.height,
child: ListView.builder(
shrinkWrap: true,
itemCount: litems.length,
itemBuilder: (BuildContext ctxt, int index) {
return Column(
children: [
Container(
height: 55.0,
width: MediaQuery.of(context).size.width*0.9,
child: new RaisedButton(
child: new Text(litems[index]),
textColor: Colors.white,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: pressAttention ? Colors.green : Colors.grey,
onPressed: () => setState(() => pressAttention = !pressAttention),
),
),
SizedBox20(),
],
);
}),
),
);
}
}
如果有人知道如何做到這一點，請幫助。
uj5u.com熱心網友回復：
最簡單的方法是在單獨的小部件中提取按鈕邏輯。但是，如果您需要pressAttentions頂部小部件中的每個值，這將不起作用。
無論如何，這是最簡單的方法：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: Material(child: MyApp())));
}
class MyApp extends StatelessWidget {
final List<String> litems = ["Counter No 1", "Counter No 2", "Counter No 3", "Counter No 4"];
@override
Widget build(BuildContext context) {
return SafeArea(
child: ListView.builder(
shrinkWrap: true,
itemCount: litems.length,
itemBuilder: (context, index) {
return MyButton(title: litems[index]);
}
),
);
}
}
class MyButton extends StatefulWidget {
final String title;
const MyButton({
Key? key,
required this.title,
}) : super(key: key);
@override
State<MyButton> createState() => _MyButtonState();
}
class _MyButtonState extends State<MyButton> {
// Default to non pressed
bool pressAttention = false;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Container(
height: 55.0,
width: MediaQuery.of(context).size.width * 0.9,
child: new RaisedButton(
child: new Text(widget.title),
textColor: Colors.white,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: pressAttention ? Colors.green : Colors.grey,
onPressed: () => setState(() => pressAttention = !pressAttention),
),
),
);
}
}
如果您需要以下串列，請使用以下方法pressAttentions：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: Material(child: MyApp())));
}
class MyApp extends StatefulWidget {
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final List<String> litems = ["Counter No 1", "Counter No 2", "Counter No 3", "Counter No 4"];
// Initialize with the same length as litems and with only falses
late List<bool> pressedAttentions = litems.map((e) => false).toList();
@override
Widget build(BuildContext context) {
return SafeArea(
child: ListView.builder(
shrinkWrap: true,
itemCount: litems.length,
itemBuilder: (context, index) {
final pressAttention = pressedAttentions[index];
return Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Container(
height: 55.0,
width: MediaQuery.of(context).size.width * 0.9,
child: new RaisedButton(
child: new Text(litems[index]),
textColor: Colors.white,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: pressAttention ? Colors.green : Colors.grey,
onPressed: () => setState(() => pressedAttentions[index] = !pressAttention),
),
),
);
}
),
);
}
}
作為獎勵，如果您一次只希望選擇 1 個按鈕：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: Material(child: MyApp())));
}
class MyApp extends StatefulWidget {
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final List<String> litems = ["Counter No 1", "Counter No 2", "Counter No 3", "Counter No 4"];
// Initialize to -1 so that none are selected
// If you want to select the first by default you could change this to 0
int pressedAttentionIndex = -1;
@override
Widget build(BuildContext context) {
return SafeArea(
child: ListView.builder(
shrinkWrap: true,
itemCount: litems.length,
itemBuilder: (context, index) {
final pressAttention = pressedAttentionIndex == index;
return Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Container(
height: 55.0,
width: MediaQuery.of(context).size.width * 0.9,
child: new RaisedButton(
child: new Text(litems[index]),
textColor: Colors.white,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: pressAttention ? Colors.green : Colors.grey,
onPressed: () => setState(() => pressedAttentionIndex = index),
),
),
);
}
),
);
}
}
附帶說明：您的命名似乎有問題：
- DO你首字母大寫的名字屬性（BAD：
litems，GOOD：lItems） - DO開始你的布爾變數
is或has：（BAD：pressAttention，GOOD：hasPressedAttention）
uj5u.com熱心網友回復：
嘗試下面的代碼希望它對您有所幫助，并且有一件事使用了ElevatedButton而不是RaisedButton， 因為當前的 flutter 版本 RaisedButton Widget 已被棄用。
uj5u.com熱心網友回復：
使用型別 int 來標記點擊的按鈕，
List<String> litems = ["Counter No 1", "Counter No 2", "Counter No 3", "Counter No 4"];
late int tapIndex;
@override
void initState() {
super.initState();
tapIndex = litems.length; // make sure no buttons are clicked in the initial state
}
Widget build(BuildContext context) {
return SafeArea(
child: SingleChildScrollView(
SizedBox(
height: MediaQuery.of(context).size.height,
child: ListView.builder(
shrinkWrap: true,
itemCount: litems.length,
itemBuilder: (BuildContext ctxt, int index) {
return Column(
children: [
Container(
height: 55.0,
width: MediaQuery.of(context).size.width*0.9,
child: new RaisedButton(
child: new Text(litems[index]),
textColor: Colors.white,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: tapIndex == index ? Colors.green : Colors.grey,
onPressed: () => setState(() => tapIndex = index),
),
),
SizedBox20(),
],
);
}),
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/317316.html