iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
1
Mobile Development

30天手滑用Google Flutter解鎖Hybrid App成就系列 第 27

30天Flutter手滑系列 - 聊天室開發(Chat Room)(7)

人要持續往前走,先放下前一篇30天Flutter手滑系列 - 聊天室開發(Chat Room)(6),今天先來把主要的聊天頁完成,不然估計又得花上無法預期的時間。

新增Chat Page

lib/pages/下,新增一個chat.dart的檔案,這一頁要用來呈現聊天室的主要介面。這邊我先把main.dart初始後的首頁改成連到這個page。

main.dart

class ChatRoom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: ChatPage(),  // 改成連到ChatPage
    );
  }
}

新增輸入框

chat.dart,先拉出簡單的UI,並放入一個TextField的Widget。
首先用一個Column包住TextField,然後為了讓它可以保持在螢幕下方,放入一個Expanded讓它補滿畫面空間。

class ChatPage extends StatefulWidget {
  @override
  State createState() => new ChatPageState();
}

class ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Chat Room'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: Text('Test Screen'),
            ),
            TextField(
              decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(16.0),
                  border: OutlineInputBorder(),
                  hintText: 'Type something...'),
            )
          ],
        ));
  }
}

https://ithelp.ithome.com.tw/upload/images/20191004/201200281fFel3s1cL.png

看到畫面,發現TextField在Iphone 11會被圓角的邊切掉,這邊我不確定一般聊天室的App有沒有處理這塊,我這邊先把它往上位移一些,有更好的建議歡迎指教。

TextField外層加入一個Container,指定marginbottom,使其往上擠。

Container(
  margin: const EdgeInsets.only(bottom: 16.0),
  child: TextField(
     decoration: InputDecoration(
     contentPadding: EdgeInsets.all(16.0),
     border: OutlineInputBorder(),
     hintText: 'Type something...'),
   ),
)

https://ithelp.ithome.com.tw/upload/images/20191004/20120028QAj9RZCuI3.png


新增送出鍵

在原本的Container內加入Row,並且新增一個IconButton

Container(
   margin: const EdgeInsets.only(bottom: 16.0),
   child: Row(
     children: <Widget>[
        Flexible(
          child: TextField(
          decoration: InputDecoration(
          contentPadding: EdgeInsets.all(16.0),
          border: OutlineInputBorder(),
          hintText: 'Type something...'),
        ),
     ),
     IconButton(
         icon: Icon(Icons.send),
         onPressed: () => {},
     ),
    ],
))

https://ithelp.ithome.com.tw/upload/images/20191004/20120028KAQthfL2kq.png


連動TextField和Button

在這邊我們要提供TextField一個TextEditingController,它可以做為TextFieldController屬性使用,在用之前不要忘記先宣告它。

final TextEditingController _chatController = new TextEditingController();

順便寫一個處理事件的Function

void _submitText(String text) {
  print(text);
}

然後在TextFieldonSubmitted這個屬性,綁定一個剛剛寫的Function,以及加上controller

Expanded(
  child: TextField(
     decoration: InputDecoration(
        contentPadding: EdgeInsets.all(16.0),
        border: OutlineInputBorder(),
        hintText: 'Type something...'),
        controller: _chatController,
        onSubmitted: _submitText,  // 綁定事件給_submitText這個Function
     ),
),
IconButton(
  icon: Icon(Icons.send),
  onPressed: () => _submitText(_chatController.text),
),

如果測試有在控制台出現訊息,就成功了。


總結

今天用了Expanded來填滿空間,其實還有另一個很像的Flexible,我看看要怎麼套用到這個頁面。
然後對於遇到有弧度的手機螢幕,一般APP怎麼做,這可能我要去實際找個機子來看一下,或是歡迎提供意見,感謝。


參考資料

https://flutter.dev/docs/cookbook/forms/retrieve-input


上一篇
30天Flutter手滑系列 - 聊天室開發(Chat Room)(6)
下一篇
30天Flutter手滑系列 - 聊天室開發(Chat Room)(8)
系列文
30天手滑用Google Flutter解鎖Hybrid App成就30

尚未有邦友留言

立即登入留言