Flutter實現自定義單選框
先看效果：
代碼：
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutterfiledemo/untils/Message.dart';
class dxk extends StatefulWidget {
@override
_dxkState createState() => _dxkState();
}
class _dxkState extends State<dxk> {
//支付寶圖片路徑
String lj ="assets/images/wxzyf.png";
//微信支付
String lj2 ="assets/images/wxzyf.png";
//單選框的選擇
bool dj = true;
bool dj2 = true;
//判斷選中支付寶仍是微信 默認支付寶
String pay ="ailipay";
//充值金額
String monysNums;
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('充值頁面'),
leading: new IconButton(
icon: new Icon(
Icons.chevron_left,
size: 35.0,
),
onPressed: () => Navigator.of(context).pop(),
),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.fromLTRB(20,10, 0, 0),
child: TextField(
//最大行數
maxLines: 1,
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
icon: Icon(
Icons.attach_money,
color: Colors.black,
),
labelText: '請輸入你要充值的金額',
helperText: '充值金額不能爲空',
),
// onChanged: _textFieldChanged,
autofocus: true,
onChanged: (value) {
monysNums = value;
},
),
),
new ListTile(
title: Container(
child: Stack(
children: <Widget>[
Image.asset(
'assets/images/ailipay.png',
height:ScreenUtil().setHeight(106),
width: ScreenUtil().setWidth(190),
),
new Align(
alignment: FractionalOffset.centerRight,
child: Image.asset(
"${lj}",
width: ScreenUtil().setWidth(55),
height: ScreenUtil().setHeight(70),
),
),
],
),
),
// trailing: Icon(Icons.chevron_right),
onTap: () {
setState(() {
if(dj){
pay = "ailipay";
lj = "assets/images/xz.png";
lj2 ="assets/images/wxzyf.png";
dj = false;
dj2 = true;
}else{
lj ="assets/images/wxzyf.png";
dj = true;
}
});
},
),
new ListTile(
title: Container(
child: Stack(
children: <Widget>[
Image.asset(
'assets/images/WePayLogo.png',
height:ScreenUtil().setHeight(66),
width: ScreenUtil().setWidth(230),
),
// new Text('暱稱'),
new Align(
alignment: FractionalOffset.centerRight,
child: Image.asset(
"${lj2}",
width: ScreenUtil().setWidth(55),
height: ScreenUtil().setHeight(70),
),
),
],
),
),
// trailing: Icon(Icons.chevron_right),
onTap: () {
setState(() {
if(dj2){
pay = "wxpay";
lj2 = "assets/images/xz.png";
lj = "assets/images/wxzyf.png";
dj2 = false;
dj = true;
}else{
lj2 ="assets/images/wxzyf.png";
dj2 = true;
}
});
},
),
new Container(
height: 45.0,
margin: EdgeInsets.fromLTRB(10, 70, 10, 0),
child: new SizedBox.expand(
child: new RaisedButton(
onPressed: () {
//判斷是哪一個支付
Message.showToast("選中的是${pay}充值金額爲:${monysNums}");
},
// color: Color.fromARGB(255, 61, 203, 128),
color: Colors.blue,
child: new Text(
'充值',
style: TextStyle(
fontSize: 14.0,
color: Color.fromARGB(255, 255, 255, 255)),
),
// shape: new RoundedRectangleBorder(
// borderRadius: new BorderRadius.circular(45.0)),
),
),
),
],
),
),
),
);
}
}
須要的文件：
支付寶Logo素材的話，能夠去支付寶官網下載。我作的比較醜，能夠優化一下。微信