我在 Row 中有 2 個容器，當我單擊一個容器時它應該改變它的大小，我已經設定了容器的默認大小，當點擊容器時它應該改變容器的大小。
下面是我的代碼：
double selectedWidthActive = width * 0.45;
double selectedWidthInActive = width * 0.40;
double selectedHeightActive = height * 0.45;
double selectedHeightInActive = width * 0.40;
GestureDetector(
onTap: (){
setState(() {
selected = true;
credit = true;
});
},
child: Container(
width: selected ? selectedWidthActive : selectedWidthInActive,
height: selected ? selectedHeightActive : selectedHeightInActive,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Color(0xffFFD4E2), Color(0xffFF8FB3)], begin: Alignment.topCenter, end: Alignment.bottomCenter),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SvgPicture.asset('assets/svg/debit_account.svg',width: 50,),
Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.75),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Text('Debit Card', style: TextStyle(fontSize: 13, fontFamily: 'Gilroy Medium'),),
),
),
],
),
),
),
),
當我在控制臺中列印值時，它沒有改變。
這是我的預期輸出。
請幫助我。
uj5u.com熱心網友回復：
真的很簡單
double w = width * 0.45;
double h = height* 0.45;
...event i.e. on click, etc
setState(() {
w = width * 0.40;
h = height* 0.40;
});
uj5u.com熱心網友回復：
嘗試這個：
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
bool selected = false;
bool credit = false;
double selectedWidthActive = 0;
double selectedHeightActive = 0;
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
double selectedWidthInActive = width * 0.40;
double selectedHeightInActive = width * 0.40;
return Scaffold(
body: GestureDetector(
onTap: () {
setState(() {
selected = true;
credit = true;
selectedWidthActive = width * 0.45;
selectedHeightActive = height * 0.45;
});
},
child: Container(
width: selected ? selectedWidthActive : selectedWidthInActive,
height: selected ? selectedHeightActive : selectedHeightInActive,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffFFD4E2), Color(0xffFF8FB3)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
const FlutterLogo(),
Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.75),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Text(
'Debit Card',
style:
TextStyle(fontSize: 13, fontFamily: 'Gilroy Medium'),
),
),
),
],
),
),
),
),
);
}
}
uj5u.com熱心網友回復：
Saitoh Akira 的回答是正確的，但它可以發展。
// 代碼
onTap: () {
setState(() {
selected = !selected;
credit = !credit;
selectedWidthActive = width * 0.45;
selectedHeightActive = height * 0.45;
});
},
//
像這樣使用 onTap 功能更有效
有一個美好的日子:))
uj5u.com熱心網友回復：
您當前的代碼運行良好。我只是檢查一下，一旦點擊就可以更改寬度和高度。當您點擊其他和先前點擊的專案沒有得到更改時，您是否面臨問題？如果是這樣，請管理所選的布林值，并記入那里。請檢查我嘗試過的代碼，如下所示。結果
Row(
children: [
GestureDetector(
onTap: () {
setState(() {
selected = true;
credit = false;
});
},
child: Container(
width: selected ? selectedWidthActive : selectedWidthInActive,
height: selected
? selectedHeightActive
: selectedHeightInActive,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffFFD4E2), Color(0xffFF8FB3)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.75),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 5, horizontal: 10),
child: Text('Debit Card', style: TextStyle(
fontSize: 13, fontFamily: 'Gilroy Medium'),),
),
),
],
),
),
),
),
SizedBox(width: 10,),
GestureDetector(
onTap: () {
setState(() {
selected = false;
credit = true;
});
},
child: Container(
width: credit ? selectedWidthActive : selectedWidthInActive,
height: credit
? selectedHeightActive
: selectedHeightInActive,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffBDF4FF), Color(0xff7AE7FF)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.75),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 5, horizontal: 10),
child: Text('Credit Card', style: TextStyle(
fontSize: 13, fontFamily: 'Gilroy Medium'),),
),
),
],
),
),
),
),
],
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/487753.html