Flutter学习之旅(二)----MD风格和点击事件

最新推荐文章于 2024-08-08 08:57:11 发布

zhangxiangliang2

最新推荐文章于 2024-08-08 08:57:11 发布

阅读量9.3k

点赞数

分类专栏： Flutter开发 Flutter学习之旅文章标签： android flutter ios

本文链接：https://blog.csdn.net/zhangxiangliang2/article/details/75578181

版权

这篇博客介绍了Flutter中的一些基本控件，如Text、Row、Column、Stack和Container，并展示了如何创建MD风格的界面。文章通过实例演示了如何使用GestureDetector响应点击事件，以及在遇到错误时如何调试解决。还提到了无状态和有状态Widget的概念，以及在实现复杂功能时StatefulWidget的作用。

摘要由CSDN通过智能技术生成

Flutter中有许多常用的控件，比如下面的：
Text：文本控件，相当于安卓TextView;
Row，Column：相当于安卓LinearLayout的两个方向;
Stack：与Positioned控件配合，放到top, right, bottom, or left;
Container：矩形控件，可与BoxDecoration配合来装饰 background, a border, or a shadow，可用margins, padding, and constraints来设置其尺寸。
当然还有很多其他的控件，后面用到的时候再一一介绍，这里大家先有个印象。

下面是一个常见页面的简单布局的完整代码：

import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget{
   
  MyAppBar({
  this.title});
  final Widget title;
  @override
  Widget build(BuildContext context) {
    return new Container(//矩形控件
      height: 50.0,//顶部导航栏的高度
      padding: const EdgeInsets.symmetric(horizontal: 10.0),//顶部导航栏与两侧的距离,horizontal表示水平方向
      decoration: new BoxDecoration(color: Colors.blue[500]),//顶部导航栏颜色
      child: new Row(//Row相当于LinearLayout水平布局,包括菜单按钮，标题，搜索按钮
        children: <Widget>[new IconButton(icon:new Icon( Icons.menu), onPressed: null),//左上角菜单按钮，系统提供了图片，无点击事件
        new Expanded(child: title),//标题文本充满整行布局
        new IconButton(icon: new Icon(Icons.search), onPressed: null),],//右上角搜索按钮，系统提供了图片，无点击事件
      ), );
  }
}

class