Flutter自定义键盘视图插件upper_keyboard_view_with_photo_and_send_icon的使用

安装

1. 如果还没有创建juneflow项目，请根据此指南创建一个。

2. 打开终端并切换到juneflow项目的根目录，然后输入以下命令：

   june add upper_keyboard_view_with_photo_and_send_icon
   

3. 启动项目，输入以下命令：

   flutter run lib/app/_/_/interaction/view.blueprint.wrapper/keyboard_attachable/upper_keyboard_view_with_photo_and_send_icon/usage.dart -d chrome
   

使用示例

该插件提供了一个自定义键盘视图，包含照片选择按钮和发送按钮。以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:upper_keyboard_view_with_photo_and_send_icon/upper_keyboard_view_with_photo_and_send_icon.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('自定义键盘视图示例'),
        ),
        body: UpperKeyboardViewWithPhotoAndSendIconExample(),
      ),
    );
  }
}

class UpperKeyboardViewWithPhotoAndSendIconExample extends StatefulWidget {
  @override
  _UpperKeyboardViewWithPhotoAndSendIconExampleState createState() => _UpperKeyboardViewWithPhotoAndSendIconExampleState();
}

class _UpperKeyboardViewWithPhotoAndSendIconExampleState extends State<UpperKeyboardViewWithPhotoAndSendIconExample> {
  TextEditingController _textEditingController = TextEditingController();

  void _onSendPressed(String text) {
    // 处理发送逻辑
    print("发送文本: $text");
  }

  void _onPhotoSelected(File photo) {
    // 处理照片选择逻辑
    print("选择的照片路径: ${photo.path}");
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: _textEditingController,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: '请输入消息',
              ),
            ),
          ),
        ),
        UpperKeyboardViewWithPhotoAndSendIcon(
          onSendPressed: _onSendPressed,
          onPhotoSelected: _onPhotoSelected,
        ),
      ],
    );
  }
}

代码说明

1. 导入包:

   import 'package:upper_keyboard_view_with_photo_and_send_icon/upper_keyboard_view_with_photo_and_send_icon.dart';
   

   导入插件包以使用自定义键盘视图。

2. 主应用:

   void main() {
     runApp(MyApp());
   }
   

   定义主函数，启动应用。

3. MyApp类:

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('自定义键盘视图示例'),
           ),
           body: UpperKeyboardViewWithPhotoAndSendIconExample(),
         ),
       );
     }
   }
   

   创建一个简单的Material App，并设置首页为UpperKeyboardViewWithPhotoAndSendIconExample。

4. UpperKeyboardViewWithPhotoAndSendIconExample类:

   class UpperKeyboardViewWithPhotoAndSendIconExample extends StatefulWidget {
     @override
     _UpperKeyboardViewWithPhotoAndSendIconExampleState createState() => _UpperKeyboardViewWithPhotoAndSendIconExampleState();
   }
   

   定义一个状态fulWidget来管理键盘视图的状态。

5. _UpperKeyboardViewWithPhotoAndSendIconExampleState类:

   class _UpperKeyboardViewWithPhotoAndSendIconExampleState extends State<UpperKeyboardViewWithPhotoAndSendIconExample> {
     TextEditingController _textEditingController = TextEditingController();
   
     void _onSendPressed(String text) {
       // 处理发送逻辑
       print("发送文本: $text");
     }
   
     void _onPhotoSelected(File photo) {
       // 处理照片选择逻辑
       print("选择的照片路径: ${photo.path}");
     }
   
     @override
     Widget build(BuildContext context) {
       return Column(
         children: [
           Expanded(
             child: Padding(
               padding: const EdgeInsets.all(8.0),
               child: TextField(
                 controller: _textEditingController,
                 decoration: InputDecoration(
                   border: OutlineInputBorder(),
                   labelText: '请输入消息',
                 ),
               ),
             ),
           ),
           UpperKeyboardViewWithPhotoAndSendIcon(
             onSendPressed: _onSendPressed,
             onPhotoSelected: _onPhotoSelected,
           ),
         ],
       );
     }
   }