[英]Making a Phone Dialer App. How to link a FloatingActionButton such that it opens a textfield where I can enter a Number
我嘗試制作一個返回 TextField 的 function,然后將 function 名稱放入 onPressed 參數中。 但是,當我按下按鈕時,除了確認按鈕已被按下之外,即使在終端中也沒有任何反應。
我只有一周左右的時間在 flutter 學習並且對 stackoverflow 是全新的所以如果我很愚蠢請原諒。這是我的代碼:-
import 'package:flutter/material.dart';
void main() {
runApp(
dialer(),
);
}
class dialer extends StatefulWidget {
const dialer({super.key});
@override
State<dialer> createState() => _dialerState();
}
txtfld(onPressed) {
return Container(
child: TextField(
keyboardType: TextInputType.phone,
),
);
}
class _dialerState extends State<dialer> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.black,
actions: <Widget>[
Icon(
Icons.search,
size: 30,
),
Icon(
Icons.more_vert,
size: 30,
),
Padding(
padding: EdgeInsets.all(5),
),
],
),
body: Column(
children: <Widget>[
Flexible(
flex: 3,
fit: FlexFit.tight,
child: Container(
margin: EdgeInsets.only(top: 50),
child: Text(
'Phone',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
children: <Widget>[
Container(),
Container(
height: 80,
width: 314,
color: Color.fromARGB(255, 59, 59, 59),
padding: EdgeInsets.all(10),
child: Text(
'94693-68171',
style: TextStyle(
color: Colors.grey,
),
textScaleFactor: 1.25,
),
),
],
),
SizedBox(
height: 5,
),
Row(
children: <Widget>[
Container(),
Container(
height: 80,
width: 314,
color: Color.fromARGB(255, 59, 59, 59),
padding: EdgeInsets.all(10),
child: Text(
'696969696969',
style: TextStyle(color: Colors.grey),
textScaleFactor: 1.25,
),
),
],
),
SizedBox(
height: 5,
),
Row(
children: <Widget>[
Container(
height: 80,
width: 314,
color: Color.fromARGB(255, 59, 59, 59),
padding: EdgeInsets.all(10),
child: Text(
'4204204204',
style: TextStyle(color: Colors.grey),
textScaleFactor: 1.25,
),
),
],
),
SizedBox(
height: 5,
),
Row(
children: <Widget>[
Container(
height: 80,
width: 314,
color: Color.fromARGB(255, 59, 59, 59),
padding: EdgeInsets.all(10),
child: Text(
'6666666666',
style: TextStyle(color: Colors.grey),
textScaleFactor: 1.25,
),
),
],
),
SizedBox(
height: 5,
),
Row(
children: <Widget>[
Container(
height: 80,
width: 314,
color: Color.fromARGB(255, 59, 59, 59),
padding: EdgeInsets.all(10),
child: Text(
'1234567890',
style: TextStyle(color: Colors.grey),
textScaleFactor: 1.25,
),
),
],
),
SizedBox(
height: 5,
),
Row(
children: <Widget>[
Container(
height: 80,
width: 314,
color: Color.fromARGB(255, 59, 59, 59),
padding: EdgeInsets.all(10),
child: Text(
'Elon musk',
style: TextStyle(color: Colors.grey),
textScaleFactor: 1.25,
),
),
],
),
SizedBox(
height: 5,
),
],
),
],
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.call),
onPressed: (() => txtfld),
elevation: 12,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
),
);
}
}
試試這個:為您的文本字段定義一個焦點節點,並記住在 onTap 觸發后將其處置,如下所示
late FocusNode commentFocus;
@override
void dispose() {
commentFocus.dispose();
}
@override
initState(){
commentFocus = FocusNode();
super.initState();
}
...
txtfld(onPressed) {
return Container(
child: TextField(
focusNode: commentFocus,
keyboardType: TextInputType.phone,
),
);
}
...
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.call),
onPressed: (){
commentFocus.requestFocus();///Trigger here.
},
elevation: 12,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.