ListView(
scrollDirection: Axis.horizontal,
children: [
GestureDetector(
onTap: () {
setState(() {
selectedCard = index;
});
},
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
side: BorderSide(
color: selectedCard == index
? Colors.red
: Colors.transparent,
width: 2.0,
),
borderRadius: BorderRadius.circular(8.0),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
child: Center(
child: Text(
'Painting',
style: artStyle,
)),
),
),
單擊卡片時如何顯示任何顏色邊框，如藍色、紅色，以及單擊另一張卡片時，如何使第一個單擊的卡片周圍的邊框消失并移動到下一個？
uj5u.com熱心網友回復：
首先從構建方法中定義新變數，如下所示：
int selectedCard = -1;
然后在您的串列視圖專案生成器中執行此操作：
GestureDetector(
onTap: () {
setState(() {
selectedCard = 0;
});
},
child: Card(
shape: StadiumBorder(
side: BorderSide(
color: selectedCard == 0 ? Colors.red : Colors.transparent,
width: 2.0,
),
),
elevation: 5,
borderOnForeground: true,
shadowColor: Colors.transparent,
child: Center(
child: Text(
'Photorealism',
),
),
),
),
對于串列中的下一個專案，請selectedCard = 1;在 setstate中設定，并對color: selectedCard == 1所有卡片重復此操作。
完整示例代碼：
class TestingDesign2 extends StatefulWidget {
const TestingDesign2({super.key});
@override
State<TestingDesign2> createState() => _TestingDesign2State();
}
class _TestingDesign2State extends State<TestingDesign2> {
int selectedCard = -1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
SizedBox(
height: 50,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
GestureDetector(
onTap: () {
setState(() {
selectedCard = 0;
});
},
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
side: BorderSide(
color:
selectedCard == 0 ? Colors.red : Colors.transparent,
width: 2.0,
),
borderRadius: BorderRadius.circular(8.0),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
child: Center(
child: Text(
'Painting 1',
)),
),
),
),
GestureDetector(
onTap: () {
setState(() {
selectedCard = 1;
});
},
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
side: BorderSide(
color:
selectedCard == 1 ? Colors.red : Colors.transparent,
width: 2.0,
),
borderRadius: BorderRadius.circular(8.0),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
child: Center(
child: Text(
'Painting 2',
)),
),
),
),
GestureDetector(
onTap: () {
setState(() {
selectedCard = 2;
});
},
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
side: BorderSide(
color:
selectedCard == 2 ? Colors.red : Colors.transparent,
width: 2.0,
),
borderRadius: BorderRadius.circular(8.0),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
child: Center(
child: Text(
'Painting 3',
)),
),
),
),
],
),
),
],
),
);
}
}
uj5u.com熱心網友回復：
點擊每個串列視圖專案時，您需要分配每個子專案的硬編碼索引。此外，我通過用滿足您要求的Container替換Center和Padding小部件來優化您的代碼。
完整代碼：
import 'package:flutter/material.dart';
void main() {
runApp(const HomePage());
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _selectedIndex = -1; // to keep the currently clicked item's index
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: ListView(
scrollDirection: Axis.horizontal,
children: [
GestureDetector(
onTap: () {
setState(() {
_selectedIndex = _selectedIndex == 0
? -1
: 0; // remove currently selected item's index if same item clicked else assign the index of other clicked item
});
},
child: Card(
shape: _selectedIndex == 0
? const RoundedRectangleBorder(
side: BorderSide(
color: Colors.deepPurpleAccent,
),
)
: null,
elevation: 5,
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 20),
child: const Text(
'Photorealism',
// style: artStyle,
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
_selectedIndex = _selectedIndex == 1
? -1
: 1; // remove currently selected item's index if same item clicked else assign the index of other clicked item
});
},
child: Card(
shape: _selectedIndex == 1
? const RoundedRectangleBorder(
side: BorderSide(
color: Colors.deepPurpleAccent,
),
)
: null,
elevation: 5,
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 20),
child: const Text(
'Video',
// style: artStyle,
),
),
),
),
],
),
),
);
}
}
輸出：
uj5u.com熱心網友回復：
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(home: MyApp()
),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int selectedCard = 0;
var artStyle = const TextStyle(fontSize: 14.0);
@override
Widget build(BuildContext context) {
return ListView(
scrollDirection: Axis.horizontal,
children: [
GestureDetector(
onTap: () {
setState(() {
selectedCard = 1;
});
},
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
side: BorderSide(
color: selectedCard == 1
? Colors.red
: Colors.transparent,
width: 2.0,
),
borderRadius: BorderRadius.circular(8.0),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
child: Center(
child: Text(
'Painting',
style: artStyle,
)),
),
),
),
GestureDetector(
onTap: () {
setState(() {
selectedCard = 2;
});
},
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
side: BorderSide(
color: selectedCard == 2
? Colors.red
: Colors.transparent,
width: 2.0,
),
borderRadius: BorderRadius.circular(8.0),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
child: Center(
child: Text(
'Painting',
style: artStyle,
)),
),
),
),
],
);
}
}
要點：在此處完成代碼。您可以將代碼復制并粘貼到dartpad上以查看結果
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/537200.html
標籤：扑镖
上一篇：使用電話號碼注冊和登錄|撲