我正在構建一個帶有徽標的登錄頁面，然后在其下方有一個登錄和登錄按鈕。我使用了一個盒子裝飾來指定背景顏色，因為我對漸變方案非常講究。但是，我意識到它可能會對我的容器小部件產生某種“絕對”影響，因為我似乎無法更改小部件中按鈕的顏色。我是 Flutter UI 的新手，我可能錯誤地將小部件分層，但我們將不勝感激任何幫助！這是登陸頁面的代碼：
import 'package:flutter/material.dart';
import 'package:zefyr/common_widgets/cutom_elevated_button.dart';
class LandingPage extends StatelessWidget {
const LandingPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
gradient : LinearGradient(
begin: Alignment(0.1705881804227829,-0.7394942045211792),
end: Alignment(0.7395344376564026,0.7999715805053711),
colors: [Color.fromRGBO(212, 7, 248, 1),Color.fromRGBO(141, 6, 248, 1)]
),
image: DecorationImage(
image: AssetImage('assets/images/zefyr_logo.png'),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const <Widget>[
SizedBox(height: 450,),
CustomElevatedButton(
bgColor: Colors.white,
textColor: Colors.pinkAccent,
onPressed: null,
height: 62,
text: "Sign Up",
),
SizedBox(height: 12,),
CustomElevatedButton(
bgColor: Colors.white,
textColor: Colors.pinkAccent,
onPressed: null,
height: 62,
text: "Login",
)
]
),
);
}
}
這是自定義提升按鈕類的代碼：
import 'package:flutter/material.dart';
class CustomElevatedButton extends StatelessWidget {
const CustomElevatedButton({
this.height = 40.0,
required this.bgColor,
required this.textColor,
this.borderRadius = 30.0,
required this.onPressed,
required this.text,
this.textSize = 15.0,
});
final double height;
final Color bgColor;
final Color textColor;
final double borderRadius;
final VoidCallback? onPressed;
final String text;
final double textSize;
@override
Widget build(BuildContext context) {
//IMPORTANT: I originally did not wrap this in a SizedBox. I originally
//returned an ElevatedButton. But if you want to change the height of the
//button, the ElevatedButton widget does not have a height property.
//So, you wrap it in a SizedBox widget so you can adjust the height
return SizedBox(
height: height,
width: 162,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: bgColor,
onPrimary: textColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadius),
),
),
child: Text(
text,
style: TextStyle(
fontSize: textSize
),
),
onPressed: onPressed,
),
);
}
}
這是頁面當前的樣子。無論我做什么，我都無法讓按鈕與背景顏色不匹配。關于如何糾正這種行為 的任何想法：著陸頁圖片
uj5u.com熱心網友回復：
看起來有點疏忽。你有你的按鈕為空。我知道您可能正在測驗您的代碼是為什么。但是，如果您想查看顏色的行為，請向 onPressed 添加一個 void 回呼，如下所示：
onPressed: () {}
然后您將收到一個錯誤，因為您的子小部件串列是const。在您測驗時暫時洗掉它，您應該一切順利！
uj5u.com熱心網友回復：
試試這個它會作業。將按下從 null 更改為 this.....
CustomElevatedButton(
bgColor: Colors.white,
textColor: Colors.pinkAccent,
onPressed: (){
},
height: 62,
text: "Sign Up",
),
SizedBox(height: 12,),
CustomElevatedButton(
bgColor: Colors.white,
textColor: Colors.pinkAccent,
onPressed: (){
},
height: 62,
text: "Login",
)
uj5u.com熱心網友回復：
你onPressed的按鈕是空的，它不帶顏色。嘗試如下：
class LandingPage extends StatelessWidget {
const LandingPage({Key? key}) : super(key: key);
void functionClick() {}
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment(0.1705881804227829, -0.7394942045211792),
end: Alignment(0.7395344376564026, 0.7999715805053711),
colors: [
Color.fromRGBO(212, 7, 248, 1),
Color.fromRGBO(141, 6, 248, 1)
]),
image: DecorationImage(
image: AssetImage('assets/images/zefyr_logo.png'),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 450,
),
CustomElevatedButton(
bgColor: Colors.white,
textColor: Colors.pinkAccent,
onPressed: functionClick,
height: 62,
text: "Sign Up",
),
SizedBox(
height: 12,
),
CustomElevatedButton(
bgColor: Colors.white,
textColor: Colors.pinkAccent,
onPressed: functionClick,
height: 62,
text: "Login",
)
]),
);
}
}
uj5u.com熱心網友回復：
問題是 onPressed 是null. 在 ElevatedButton 的檔案中它說
如果 [onPressed] 和 [onLongPress] 回呼為空，則按鈕將被禁用。
您看到的是按鈕的默認禁用顏色。奇怪的是你不能設定這些顏色，ElevatedButton.styleFrom所以我建議你給一個非空的 onPressed
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/439435.html
上一篇：禁用Unity除錯畫布
下一篇：如何在顫振中添加圓形圖表？