UI基础——Flutter框架的基本结构

Flutter基本介绍

Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。

Flutter基本框架

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());//主函数将MyApp()抽离出来
}

class MyApp extends StatelessWidget{//MyApp继承StatelessWidget，需要重写build方法
  @override
  Widget build(BuildContext context) {//重写的build方法
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(//顶部导航
          title: Text('Flutter Demo'),
        ),
        body: HomeContent(),//内容区域再单独抽离出来
      ),
    );
  }
}

class HomeContent extends StatelessWidgt{//抽离出来的body部分
  Widget build(BuildContext context) {
  return Scaffold();//自己设定的各种控件
  }
}

小实例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(//顶部导航
          title: Text('Flutter Demo'),
        ),
        body:HomeContent(),//内容区域
      ),
      theme: ThemeData(
          primarySwatch: Colors.yellow    //主题颜色
      ),
    );
  }

}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(    //Tab导航栏控件
      length: 2,   //Tab导航栏的数量
      initialIndex: 1, // 默认选中第几项
      child: Scaffold(
        appBar: PreferredSize(   //整个appBar的设置
          child: AppBar(
            title: TabBar(
              isScrollable: true,  //可滚动控件
              tabs: [      //导航栏设置
                Tab(text: 'A'),  //导航栏标题
                Tab(text: 'B'),
              ],
              indicatorWeight: 2, 
              indicatorSize: TabBarIndicatorSize.label,
              labelPadding: EdgeInsets.symmetric(vertical: 4, horizontal: 150.0),//horizontal导航栏按键长度
            ),
            automaticallyImplyLeading: false,
          ),
          preferredSize: Size.fromHeight(50.0),
        ),
        body: TabBarView(
          children: <Widget>[     //两个导航控件的具体内容
            ListView(     //A页面的具体设计
              children: <Widget>[//A页面的所有组件
                ListTile(//第一篇文章
                  leading: Image.network(//加载远程网络图片资源在标题和文件前
                      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602415016001&di=36b431210e0a973264bd78e1688a155b&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F0b55b319ebc4b74503cc30abc4fc1e178a821536.jpg",
                      width: 100,//图片宽度
                  ),
                  title: Text(//文章标题
                    "中秋致夏天",
                    style: TextStyle(//标题文字格式
                      fontSize: 24.0//字体大小
                    ),
                  ),
                  subtitle: Text(//文章内容
                      "对你的爱兢兢业业\n每一刻都如这中秋的圆月\n皎洁无瑕\n夏天那朵纯白的\n小花哟\n对你\n不苛求标致\n惟愿善良\n惟愿美丽",
                    maxLines: 4,//显示最大行数
                    overflow: TextOverflow.ellipsis,//超出显示范围后显示为“……”
                  ),
                ),
                ListTile(
                  leading: Image.network(
                      "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2171876836,1053661296&fm=26&gp=0.jpg",
                      width: 100,
                  ),
                  title: Text(
                    "九月的爱情",
                    style: TextStyle(
                        fontSize: 24.0
                    ),
                  ),
                  subtitle: Text(
                      "九月的小河边\n我以坐着的姿态\n用一个晚上的时间来思考得失\n却忘记了爱情本身\n充满着诡异与无情\n而我的希望\n秋天的爱情从夏天开始\n每一丝秋风\n都是我对夏天刻骨铭心的思念",
                    maxLines: 4,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                ListTile(
                  leading: Image.network(
                      "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1577501685,2161856122&fm=26&gp=0.jpg",
                    width: 100,
                  ),
                  title: Text(
                      "品味统编语文教材中的秋天",
                    style: TextStyle(
                        fontSize: 24.0
                    ),
                  ),
                  subtitle: Text(
                    '''
                 伴随着学生发展核心素养的提出和统编教材义务教育阶段全覆盖，中小学语文教学注入了源头活水。“单篇”被“单元”所替代，“课文”向“主题”更迭，当我们再去审视统编教材的文字篇章时，发现原来相对独立的篇目经纬交织，通过语言运用、思维发展、审美鉴赏和文化传承，形成了一张无形的网。让我们共同走入这一具有语文科目特征的教学场域，撷趣、共情、传神、步韵，去寻找其中的奥秘吧！
大自然不造无用的事物。晨昏昼夜，塑造了人生的厚度；春夏秋冬，丈量着人生的长度。2020年，对每个中国人都是不平凡的一年。春夏已过，目已临秋，“万影皆因月，千声各为秋”，让我们翻开教材，去寻找那独特的秋之母题。
秋之趣一年级上册《小松鼠找花生》中用小松鼠找花生的故事，讲述果实是如何收获的过程，充满了童真童趣。秋天的趣味，还体现在传统的节日中。三年级下册中的古诗《九月九日忆山东兄弟》，就是十七岁的王维在重阳佳节时所作，用来寄托游学长安的少年对故乡亲人的思念。二年级下册《传统节日》中说“过中秋，吃月饼；重阳节，要敬老”，这些都是中华民族对秋天这个季节的纪念，纪念秋天对人们年复一年的馈赠。
                    ''',
                    maxLines: 4,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                ListTile(
                  leading: Image.network(
                      "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2638300673,1062291852&fm=26&gp=0.jpg",
                      width: 100,
                  ),
                  title: Text(
                      "当今的路",
                    style: TextStyle(
                        fontSize: 24.0
                    ),
                  ),
                  subtitle: Text(
                      "我立足\n这个肉体生存的世界\n站在原地\n望向远方的终点\n心里突兀分出两条路\n一条通往过去\n一条走向未来\n灵魂\n一分为二\n没有留给肉体丝毫的养分",
                    maxLines: 4,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                ListTile(
                  leading: Image.network(
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602415695664&di=ed67684b121fd8844c573da8f5bfbfba&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F87%2Fw1080h607%2F20180402%2FXdzU-fysuuxz7544812.jpg",
                    width: 100,
                  ),
                  title: Text(
                    "深空机动完成！奔火旅途中 天问一号的“闯关”还将继续",
                    style: TextStyle(
                        fontSize: 24.0
                    ),
                  ),
                  subtitle: Text(
                    "天问一号的轨道设计，综合考虑了从发射到火星捕获的各种约束条件并使推进剂消耗尽可能小，采取了转移过程中进行一次深空机动的策略。只有经过这次方向和速度的调整，探测器才能在未来与火星准确相遇。",
                    maxLines: 4,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                ListTile(
                  leading: Image.network(
                    "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1186548115,1617991333&fm=26&gp=0.jpg",
                    width: 100,
                  ),
                  title: Text(
                    "中国食材电商节，开启中国餐饮食材的高光时刻！",
                    style: TextStyle(
                        fontSize: 24.0
                    ),
                  ),
                  subtitle: Text(
                    '''
                    据中国食材电商节组委会就本届展会相关数据统计分析,线上平台访问量高达941万,网站独立访客量27万,注册买家14万,注册卖家14079家,签上预约洽谈4848次,线上新品发布1120个,标书发布154家。全力打破传统商贸关系,重构供需生态秩序。
　　本届线下展览平台专业观众到访量高达203785人次,参展展商2788个,参展展品33638件,展览规模100000㎡,专业活动累积举办21场,商务洽谈共计653场,应标线索1565条,新品发布会177场。为全体餐饮食材人提供一场饕餮盛宴。
　　本届展会结合当下发展趋势设置的直播平台中,共计114家企业参与,举办直播场次137场,累积观看人数34万,单场观看最高人数16500人,点赞评论75万,单场点赞最高73500。
                    ''',
                    maxLines: 4,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                ListTile(
                  leading: Image.network(
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602415841562&di=6d9c72933ad178870d8ac81d4f51f38a&imgtype=0&src=http%3A%2F%2Fimg.files.swws.258.com%2F1%2F2017%2F0414%2F09%2F58f023f99f1e6.jpg",
                    width: 100,
                  ),
                  title: Text(
                    "13道很适合秋冬的下饭菜，做法一看就会，食材不贵，能多吃两碗饭",
                    style: TextStyle(
                        fontSize: 24.0
                    ),
                  ),
                  subtitle: Text(
                    '''
                    食材：
北豆腐(就是比较结实的那种哈）一块(大概380g)、木耳适量、柿子椒一个、郫县豆瓣辣酱一大勺、葱花适量、姜末适量、白糖一小勺、土豆淀粉一小勺
　　做法：
北豆腐一块切成1厘米厚的三角形片。
　放油锅中火炸至金黄色
　　每次炸几块，分几次炸完，这样省油，也不容易碎。
　　捞出备用。
　　木耳提前泡发，去硬根，柿子椒洗净，掰成小块。
　　泡发木耳我习惯用热水，比较柔软，如果喜欢脆的口感可用冷水泡，但时间要长。
　　郫县豆瓣酱，我的豆瓣酱颗粒很大，所以提前用料理机打碎了。
　　炒锅烧热放底油，加葱花姜末，加入一大勺豆瓣酱。不要放太多，因为会咸。
　　我没有再另外加盐，如果你觉的不咸，可根据自己的口味添加。小火炒一会儿至炒出红油。
　　注意火力不要太大，容易粘锅。一定要炒出红油，不然味道不好，颜色也不漂亮。
　　把木耳、豆腐放入锅中翻炒均匀，加少量清水和一小勺白糖，盖盖子稍煮几分钟入味，最后加入柿子椒翻炒均匀。
　　出锅前勾稀芡翻炒均匀即可。
                    '''
                    ,
                    maxLines: 4,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                ListTile(
                  leading: Image.network(
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602415976982&di=4817b31c525f0dd4ca95c0f69ebac760&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130620%2F9885883_232656709001_2.jpg",
                    width: 100,
                  ),
                  title: Text(
                    "这道“炒饭”不含一颗米饭,用料简单又健康,食材丰富又低脂",
                    style: TextStyle(
                        fontSize: 24.0
                    ),
                  ),
                  subtitle: Text(
                    '''
                    	这道“炒饭”不含一颗米饭，用料简单又健康，食材丰富又低脂
　　炒饭一直是很受欢迎的一种美食，有的朋友喜欢吃炒饭是因为炒饭的做法比较简单而且做好之后也不用另外炒菜了，搭配一些爽口的咸菜就可以食用了，有的朋友喜欢吃炒饭则是因为做炒饭不需要太多的时间，有的时候我们比较忙的话也不用担心没有时间做饭的问题，直接用剩下的米饭加一些食材炒一炒就可以了。今天要和大家一起分享的也是一道炒饭，不管这道炒饭和我们平时吃的不太一样，这个"炒饭"是不含一颗米饭的，大家可能会比较奇怪没有米饭为什么要叫做炒饭呢？其实这种"无米炒饭"的主要食材就是我们都熟悉的花菜，因为做好之后就像炒饭一样所以有了这个名字。这种"无米炒饭"用料特别的简单都是我们经常用到的食材，而且更加的健康，选用的食材也很丰富，重要的是这种炒饭是一种低脂的美味，所以就算是减肥瘦身的朋友也可以放心的吃，不会有发胖的问题。
                    ''',
                    maxLines: 4,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('文章1'),
                ),
                ListTile(
                  title: Text('文章2'),
                ),
                ListTile(
                  title: Text('文章3'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

演示：