簡體   English   中英

制作電話撥號器應用程序。 如何鏈接 FloatingActionButton 以便它打開一個文本字段,我可以在其中輸入數字

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM