在你的应用中实现视频通话(一)——布局

假定我们的目标是可以达成的,第一步是什么,布局

先上效果图

 

在你的应用中实现视频通话(一)——布局

 

要实现这样的一个功能,我们应该采取什么布局呢,列布局?横向布局?

这种不规则的布局,好像都不大合适,那还是采用stack布局,将图层一层层叠加起来

 

首先我们初步做一个这样的框架性的布局:

 

import 'package:flutter/material.dart';class Lession1Page extends StatefulWidget {  Lession1Page({Key key}) : super(key: key);  @override  _Lession1PageState createState() => _Lession1PageState();}class _Lession1PageState extends State<Lession1Page> {  // 最里面的通话的视图  Widget _viewRows() {    return Container();  }  // 右上角通话的小窗口  Widget _smallWindow() {    return Container();  }  // 消息列表  Widget _panel() {    return Container();  }  // 挂断,静音等工具栏  Widget _toolbar() {    return Container();  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('1.布局'),      ),      body: Center(        child: Stack(          children: <Widget>[            Text('开始'),          ],        ),      ),    );  }}

 

上面只是写了一个简单的类似脚手架的一个组件

接下来布局两个通话组件

 

  // 最里面的通话的视图  Widget _viewRows() {    return Container(      color: Colors.green,    );  }  // 右上角通话的小窗口  Widget _smallWindow() {    // GestureDetector跟随child大小    return GestureDetector(      onDoubleTap: () {},      onTap: () {},      child: Align(        alignment: Alignment.topRight,        child: Container(          color: Colors.red,          width: 110,          height: 150,          margin: EdgeInsets.only(top: 40, right: 40),        ),      ),    );  }

 

并在Stack中叠加这两个组件

 

  @override  Widget build(BuildContext context) {    return Scaffold(      // appBar: AppBar(      //   title: Text('1.布局'),      // ),      body: Center(        child: Stack(          children: <Widget>[            _viewRows(),            _smallWindow(),          ],        ),      ),    );  }

 

这一步的效果如图

 

在你的应用中实现视频通话(一)——布局

 

接下来,完善下底部的声音,挂断和摄像头布局

 

  // 挂断,静音等工具栏  Widget _toolbar() {    return Container(      alignment: Alignment.bottomCenter,      // 距离底部的距离      padding: EdgeInsets.only(bottom: 48),      child: Row(        mainAxisAlignment: MainAxisAlignment.center,        children: <Widget>[          RawMaterialButton(            onPressed: () {},            child: Icon(              Icons.mic_off,              color: Colors.blueAccent,              size: 20,            ),            shape: CircleBorder(),            elevation: 2,            fillColor: Colors.white,            // 在这个圆形的形状里面相当于直径            padding: EdgeInsets.all(12),          ),          RawMaterialButton(            onPressed: () {},            child: Icon(              Icons.call_end,              color: Colors.white,              size: 35,            ),            shape: CircleBorder(),            elevation: 2.0,            fillColor: Colors.redAccent,            padding: EdgeInsets.all(15),          ),          RawMaterialButton(            onPressed: () {},            child: Icon(              Icons.switch_camera,              color: Colors.blueAccent,              size: 20,            ),            shape: CircleBorder(),            elevation: 2,            fillColor: Colors.white,            padding: EdgeInsets.all(12),          ),        ],      ),    );  }

 

在Stack把_toolBar()组件加上

 

  @override  Widget build(BuildContext context) {    return Scaffold(      // appBar: AppBar(      //   title: Text('1.布局'),      // ),      body: Center(        child: Stack(          children: <Widget>[            _viewRows(),            _smallWindow(),            _toolbar(),          ],        ),      ),    );  }

 

到这一步,效果图如下

 

在你的应用中实现视频通话(一)——布局

 

是不是像一点样子了,当然现在还是没有任何功能的,下一篇将开始功能方面的实现。

 

附上RawMaterialButton的说明:

没有背景、没有边框的按钮,点击有水波纹效果

 

在你的应用中实现视频通话(一)——布局

 

关注微信公众号回复1获取源码,好学课堂-敏而好学,不耻下问

在你的应用中实现视频通话(一)——布局

 

在你的应用中实现视频通话(一)——布局

 

栏目
每日精选