通常一切都很好但是當我想添加 setState() 它顯示溢位。我正在制作一個 BMI 計算器應用程式，我創建了一個自定義按鈕，我認為問題開始了。
import 'package:flutter/material.dart';
class RoundIconButton extends StatelessWidget {
RoundIconButton({required this.icon, required this.tap});
final IconData icon;
final Function tap;
@override
Widget build(BuildContext context) {
return RawMaterialButton(
onPressed: tap(),
child: Icon(
icon,
color: Color(0xffFF8B00),
),
elevation: 6.0,
constraints: BoxConstraints.tightFor(
width: 40.0,
height: 47.0,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
fillColor: Colors.black,
);
}
}
import 'package:bmi_calculator/round_icon_button.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'reusable_card.dart';
import 'iconText.dart';
import 'constants.dart';
enum Gender {
male,
female,
}
class InputPage extends StatefulWidget {
const InputPage({Key? key}) : super(key: key);
@override
State<InputPage> createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
Gender? selectedGender;
int height = 180;
int weight = 50;
int age = 18;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.black,
title: Text('BMI Calculator'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
selectedGender = Gender.male;
print('Male tapped');
});
},
child: ReuseableCard(
colour: selectedGender == Gender.male
? kactiveCardColor
: kinactiveCardColor,
cardChild: iconText(
icon: FontAwesomeIcons.mars,
lable: 'Male',
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
selectedGender = Gender.female;
print('Female Tapped');
});
},
child: ReuseableCard(
colour: selectedGender == Gender.female
? kactiveCardColor
: kinactiveCardColor,
cardChild: iconText(
icon: FontAwesomeIcons.venus,
lable: 'FeMale',
),
),
),
),
],
),
),
Expanded(
child: ReuseableCard(
colour: Color(0xffFF8B00),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Height'.toUpperCase(),
style: klableTextStylet,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text(
height.toString(),
style: kNumberTextStyle,
),
Text('cm'),
],
),
SliderTheme(
data: SliderTheme.of(context).copyWith(
overlayColor: Colors.red,
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15),
overlayShape: RoundSliderOverlayShape(overlayRadius: 30),
),
child: Slider(
value: height.toDouble(),
max: 220.0,
min: 50.0,
inactiveColor: Colors.yellow,
activeColor: Colors.black,
thumbColor: Colors.red,
onChanged: (double newValue) {
setState(() {
height = newValue.round();
print(newValue);
});
},
),
),
],
),
),
),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: ReuseableCard(
colour: Color(0xffFF8B00),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Weight'.toUpperCase(),
style: klableTextStylet,
),
Text(
weight.toString(),
style: kNumberTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RoundIconButton(
tap: (){
setState(() {
weight ;
});
},
icon: FontAwesomeIcons.plus,
),
SizedBox(
width: 10,
),
RoundIconButton(
tap: (){
setState(() {
weight--;
});
},
icon: FontAwesomeIcons.minus,
),
],
),
],
),
),
),
Expanded(
child: ReuseableCard(
colour: Color(0xffFF8B00),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Age'.toUpperCase(),
style: klableTextStylet,
),
Text(
age.toString(),
style: kNumberTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RoundIconButton(
tap: (){
setState(() {
age ;
});
},
icon: FontAwesomeIcons.plus,
),
SizedBox(
width: 10,
),
RoundIconButton(
tap: (){
setState(() {
age--;
});
},
icon: FontAwesomeIcons.minus,
),
],
),
],
),
),
),
],
),
),
Container(
child: Center(
child: Text(
'Your BMI Calculator',
style: TextStyle(
color: Color(0xffFF8B00),
),
)),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15), topRight: Radius.circular(15)),
),
width: double.infinity,
height: kbottomContainerHeight,
margin: EdgeInsets.only(top: 10),
),
],
),
);
}
}
在上面的代碼中，我想在 RoundIconButton 中添加 setstate 函式，但是當我嘗試添加它時，它顯示溢位。我期待這個 但是得到這個
uj5u.com熱心網友回復：
嘗試用 SingleChildScrollView 包裹腳手架主體的 Column 它應該可以解決問題！
uj5u.com熱心網友回復：
有兩種可能的解決方案。用 SingleChildScrollview 包裹你的小部件。例如
body: SingelChildScrollView(
scrolldirection : Axis.horizontal
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
selectedGender = Gender.male;
print('Male tapped');
});
},
- 洗掉上面的擴展，您正在使用兩個擴展小部件，并且都需要在螢屏上留出一些空間，而第一個擴展會覆寫整個螢屏洗掉一個額外的擴展小部件，并用一個擴展小部件包裹整行。
uj5u.com熱心網友回復：
我得到了答案。它是關于舊版本的 flutter。在 flutter 2.0 上我們可以這樣做：
最終功能抽頭；onPresed：點擊（），
但是在 flutter 3.0 中我們必須這樣做：
最終功能（）抽頭；onPresed：點擊，
class RoundIconButton extends StatelessWidget {
RoundIconButton({required this.icon, required this.tap});
final IconData icon;
final Function() tap; // add bracket here ?
@override
Widget build(BuildContext context) {
return RawMaterialButton(
onPressed: tap(),
child: Icon(
icon,
color: Color(0xffFF8B00),
),
elevation: 6.0,
constraints: BoxConstraints.tightFor(
width: 40.0,
height: 47.0,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
fillColor: Colors.black,
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/536702.html
標籤：扑镖按钮溢出设置状态