我想制作一個按鈕，在這個按鈕中我想要一個文本和圖示，但文本應該在中心，圖示將在右側。
這是按鈕的代碼。
bottomNavigationBar: Padding(
padding:
const EdgeInsets.only(top: 20.0, bottom: 20, left: 20, right: 20),
child: SizedBox(
height: 45,
width: MediaQuery.of(context).size.width,
child: FlatButton(
onPressed: () {
_controller.nextPage(
duration: const Duration(milliseconds: 200),
curve: Curves.easeIn,
);
if(_currentPage 1 == splashData.length){
Navigator.push(context,
MaterialPageRoute(builder: (context) => HomePage()));
}
},
child: Row(mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Next",
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
SizedBox(width: 50,),
Padding(
padding: const EdgeInsets.only(right: 10),
child: Icon(Icons.arrow_forward,color: whiteColor,),
)
],
),
color: skyBlue,
),
),
),
我想要這個按鈕
而是變成了這樣。
uj5u.com熱心網友回復：
試試下面的代碼，使用Opacity小部件并設定opacity:0
注意：不要使用FlutterFlatButton所貶低的代替，ElevatedButtonTextButton
請參閱
uj5u.com熱心網友回復：
您可以使用 Stack 代替 Row 輕松實作。在 Stack 中，您也可以使用 Positioned(right: 10, child: Icon())。
Stack(
alignment: Alignment.center,
children: const [
Text(
'Next',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(Icons.arrow_forward, color: Colors.white,),
)
],
)
我們有兩種以上的方法來實作它。我給出了兩個最簡單的選擇來實作它。
uj5u.com熱心網友回復：
您可以使用Expanded（flex如果需要，還可以使用該屬性）。還添加一個Align
例如：
Row(mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(),
Expanded(
child: Text(
"Next",
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(right: 10),
child: Icon(Icons.arrow_forward,color: whiteColor),
),
),
),
],
),
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/445219.html