Flutter 开发之组件一

Flutter 的口号：一切谐为组件。同其他平台一样，Flutter 提供了一系列的组件，有基础组件（Basics Widgets），质感组件（Material Components）、Cupertino 等。

Flutter 中基础组件的介绍，用法也比较简单。每个组件都是一个以类的形式存在。Flutter 的组件属性也很多，我们不可能记得每一项，只有经常使用或者了解一些关键属性，然后用到时再去查看具体属性。正所谓“流水的属性，铁打的组件”。

本篇主要介绍以下几个组件：

  • Align-Align – 对齐组件
  • Bar – 组件
  • Box – 组件
  • Button – 组件

一、Align-Align – 对齐组件

一个 widget，它可以将其子 widget 对齐，并可以根据子 widget 的大小自动调整大小。

import ‘package:flutter/material.dart‘;

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ‘Align组件‘,
      home: Scaffold(
        appBar: AppBar(
          title: Text(‘Align组件‘),
        ),
        body:Container(
//          width: 200.0,
//          height: 200.0,
          color: Colors.red,
          child: Align(
            //对齐方式
            //alignment: Alignment.bottomLeft,
            //对齐方式使用x,y来表示 范围是-1.0 - 1.0
            alignment: Alignment(-0.5,-1.0),
            //宽高填充的系数
            widthFactor: 3.0,
            heightFactor: 3.0,
            child: Container(
              color: Colors.green,
              width: 100.0,
              height: 50.0,
              child: Text(‘align‘,style: TextStyle(color: Colors.white),),
            ),
          ),
        ),
      ),
    );
  }
}

　

二、Bar – 组件

2.1 AppBar 组件

状态栏上的右侧或左侧按钮，一个 Material Design 应用程序栏，由工具栏和其他可能的 widget（如 TabBar 和 FlexibleSpaceBar）组成。

import ‘package:flutter/material.dart‘;

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ‘AppBar组件‘,
      home: Scaffold(
        appBar: AppBar(
          title: Text(‘标题‘),
          //左侧图标
          leading: Icon(Icons.home),
          //背景色
          backgroundColor: Colors.green,
          //居中标题
          centerTitle: true,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.print),
              tooltip: ‘打印‘,
              onPressed: (){},
            ),
            //菜单按钮
            PopupMenuButton<String>(
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                //菜单项
                PopupMenuItem<String>(
                  value: ‘friend‘,
                  child: Text(‘分享到朋友圈‘),
                ),
                PopupMenuItem<String>(
                  value: ‘download‘,
                  child: Text(‘下载到本地‘),
                ),
              ],
            ),
          ],
        ),
        body: Container(),
      ),
    );
  }
}

　　

2.2 bottomNavigationBar

底部导航条，可以很容易地在 tap 之间切换和浏览顶级视图。

  return BottomNavigationBar(
      //底部按钮类型 固定样式
      type: BottomNavigationBarType.fixed,
      //按钮大小
      iconSize: 24.0,
      //点击里面的按钮回调的函数
      onTap: _onItemTapped,
      //当前选中项索引 高亮显示
      currentIndex: _currentIndex,
      //当类型为fixed时,选中项的颜色
      fixedColor: Colors.red,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(title: Text(‘聊天‘),icon: Icon(Icons.chat)),
        BottomNavigationBarItem(title: Text(‘朋友圈‘),icon: Icon(Icons.refresh)),
        BottomNavigationBarItem(title: Text(‘我的‘),icon: Icon(Icons.person)),
      ],
    );

　　

2.3 ButtonBar

未端对齐按钮容器 ButtonBar

    child: ButtonBar(
        //对齐方式 默认为末端end
        alignment: MainAxisAlignment.spaceAround,
      ),

　　

2.4 FlexibleSpaceBar

可折叠的应用栏 FlexibleSpaceBar

  body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
              return <Widget>[
                SliverAppBar(
                  //展开高度
                  expandedHeight: 150.0,
                  //是否随着滑动隐藏标题
                  floating: false,
                  //是否固定在顶部
                  pinned: true,
                  //可折叠的应用栏
                  flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(
                      ‘可折叠的组件‘,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      ),
                    ),
                  ),
                ),
              ];
            },
            body: Center(
              child: Text(‘向上提拉，查看效果‘),
            )
        ),
      ),
    );

　　

2.5 SliverAppBar

Sliver应用栏 SliverAppBar

body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
              return <Widget>[
                SliverAppBar(
                  //是否预留高度
                  primary:true,
                  //标题前面显示的一个控件
                  leading: Icon(Icons.home),
                  //操作按钮
                  actions: <Widget>[
                    Icon(Icons.add),
                    Icon(Icons.print),
                  ],
                  //设置阴影值
                  elevation: 10.0,
                  //是否固定在顶部
                  pinned: true,
                  //可扩展区域高度
                  expandedHeight: 200.0,
                  //与floating结合使用
                  snap: false,
                  //是否随着滑动隐藏标题
                  floating: false,
                  //扩展区域
                  flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(
                      ‘这是一个很酷的标题‘,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      ),
                    ),
                  ),
                ),
              ];
            },
            body: Center(
              child: Text(
                ‘拖动试试‘
              ),
            ),
        ),

　　

2.6 SnackBar

屏幕底部消息

return Center(
      child: GestureDetector(
        onTap: () {
          final snackBar = new SnackBar(
            //提示信息
            content: Text(‘这是一个SnackBar‘),
            //背景色
            backgroundColor: Colors.green,
            //操作
            action: SnackBarAction(
              textColor: Colors.white,
              label: ‘撤消‘,
              onPressed: () {},
            ),
            //持续时间
            duration: Duration(minutes: 1),
          );
          Scaffold.of(context).showSnackBar(snackBar);
        },
        child: Text(‘显示屏幕底部消息‘),
      ),
    );

　　

2.7 TabBar

选项卡，一个显示水平选项卡的 Material Design widget。

class DemoPageState extends State<DemoPage> with SingleTickerProviderStateMixin {

  ScrollController _scrollViewController;
  TabController _tabController;

  @override
  void initState(){
    super.initState();
    _scrollViewController = new ScrollController();
    //长度要和展示部分的Tab数一致
    _tabController = new TabController(vsync: this,length: 6);
  }

  @override
  void dispose(){
    super.initState();
    _scrollViewController.dispose();
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 500.0,
      child: Scaffold(
        appBar: AppBar(
          title: Text(‘选项卡‘),
          //前置图标
          leading: Icon(Icons.home),
          //应用栏背景色
          backgroundColor: Colors.green,
          //选项卡
          bottom: TabBar(
            controller: _tabController,
            //是否可以滚动
            isScrollable: true,
              tabs: <Widget>[
                Tab(text: ‘科技‘,icon: Icon(Icons.camera),),
                Tab(text: ‘房产‘,icon: Icon(Icons.print),),
                Tab(text: ‘体育‘,icon: Icon(Icons.favorite),),
                Tab(text: ‘娱乐‘,icon: Icon(Icons.share),),
                Tab(text: ‘电影‘,icon: Icon(Icons.video_call),),
                Tab(text: ‘教育‘,icon: Icon(Icons.airline_seat_flat_angled),),
              ]
          ),
        ),
        //选项卡视图
        body: TabBarView(controller: _tabController,
            children: <Widget>[
              Text(‘选项卡1‘),
              Text(‘选项卡2‘),
              Text(‘选项卡3‘),
              Text(‘选项卡4‘),
              Text(‘选项卡5‘),
              Text(‘选项卡6‘),
            ]
        ),
      ),
    );
  }
}

　　

三、Box – 组件

3.1 ConstrainedBox

限定最大最小宽高容器，对其子项施加附加约束的 widget

           //添加一个指定大小的盒子，限定其最大最小宽高
              ConstrainedBox(
                constraints: const BoxConstraints(
                  minWidth: 100.0,
                  minHeight: 20.0,
                  maxHeight: 60.0,
                  maxWidth: 200.0,
                ),
                child: Container(
                  width: 250,
                  height: 80,
                  child: Text(
                    ‘width>maxWidth height>maxHeight‘,
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Colors.green,
                ),
              ),

　　

3.2 DecoratedBox

装饰容器，DecoratedBox 可以在其子 widget 绘制前(或后)绘制一个装饰 Decoration（如背景、边框、渐变等）。

DecoratedBox

            //添加装饰
            child: DecoratedBox(
                //装饰定位 DecorationPosition.background背景模式 DecorationPosition.foreground前景模式
                position: DecorationPosition.background,
                decoration: BoxDecoration(
                  //背景色
                  color: Colors.grey,
                  //设置背景图片
                  image: DecorationImage(
                    //图片填充方式
                    fit: BoxFit.cover,
                    image: ExactAssetImage(‘assets/view.jpeg‘),
                  ),
                  //边框弧度
                  //borderRadius: BorderRadius.circular(10.0),
                  border: Border.all(
                    //边框颜色
                    color: Colors.red,
                    //边框粗细
                    width: 6.0,
                  ),
                  //边框样式
                  shape: BoxShape.rectangle,
                ),
              child: Text(‘定位演示‘,style: TextStyle(fontSize: 36.0,color: Colors.green),),
            ),

　　

3.3 FittedBox

填充容器，按自己的大小调整其子 widget 的大小和位置。 FittedBox

/*
          BoxFit.fill  //全部显示，显示可能拉伸，充满
          BoxFit.contain    //全部显示，显示原比例，不需充满
          BoxFit.cover    //显示可能拉伸，可能裁剪，充满
          BoxFit.fitWidth    //显示可能拉伸，可能裁剪，宽度充满
          BoxFit.fitHeight    //显示可能拉伸，可能裁剪，高度充满
          BoxFit.none
          BoxFit.scaleDown   //效果和contain差不多,但是此属性不允许显示超过源图片大小，可小不可大
*/

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: ‘FittedBox填充容器‘,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(‘FittedBox填充容器‘),
        ),

        body: Center(
          child: Column(
            children: <Widget>[
            Container(
                width: 300.0,
                height: 300.0,
                color: Colors.grey,
                child: FittedBox(
                  //填充类型
                  fit: BoxFit.none,
                  //居中对齐
                  alignment: Alignment.center,
                  child: Image.asset(‘assets/view.jpeg‘),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

　　

3.4 OverflowBox

溢出容器，对其子项施加不同约束的 widget，它可能允许子项溢出父级。 OverflowBox

          //溢出容器
          child: OverflowBox(
            //对齐方式
            alignment: Alignment.topLeft,
            //限制条件
            maxWidth: 300.0,
            maxHeight: 500.0,
            child: Container(
              color: Colors.blueGrey,
              width: 400.0,
              height: 400.0,
            ),
          ),

　　

3.5 RotatedBox

旋转容器，可以延顺时针以90度的倍数旋转其子 widget。RotatedBox

        body: Center(
          child: Column(
            children: <Widget>[

              SizedBox(
                height: 20.0,
              ),
              RotatedBox(
                child: Text(‘ABCDE‘,style: TextStyle(fontSize: 28.0),),
                //旋转次数 每次旋转一圈的1/4
                quarterTurns: 1,
              ),

              SizedBox(
                height: 20.0,
              ),
              RotatedBox(
                child: Text(‘ABCDE‘,style: TextStyle(fontSize: 28.0),),
                quarterTurns: 2,
              ),

              SizedBox(
                height: 20.0,
              ),
              RotatedBox(
                child: Text(‘ABCDE‘,style: TextStyle(fontSize: 28.0),),
                quarterTurns: 3,
              ),

              SizedBox(
                height: 20.0,
              ),
              RotatedBox(
                child: Text(‘ABCDE‘,style: TextStyle(fontSize: 28.0),),
                quarterTurns: 4,
              ),
            ],
          ),
        ),

　　

3.6 SizedBox

指定宽高容器，一个特定大小的盒子。这个 widget 强制它的孩子有一个特定的宽度和高度。如果宽度或高度为 NULL，则此 widget 将调整自身大小以匹配该维度中的孩子的大小。

       body:Center(
          //指定宽高容器 child不允许超出指定大小的范围
          child: SizedBox(
            width: 200.0,
            height: 200.0,
            //限定图片大小
            child: Image.asset(‘assets/cat.jpeg‘),
            //子元素
//            child: Container(
//              width: 10.0,
//              height: 10.0,
//              color: Colors.green,
//            ),
          ),
        ),

　　

四、Button – 组件

4.1 DropdownButton

下拉按钮 DropdownButton

class DropdownButtonDemo extends StatelessWidget {

  List<DropdownMenuItem> generateItemList(){
    final List<DropdownMenuItem> items = new List();
    final DropdownMenuItem item1 = new DropdownMenuItem(child: Text(‘北京‘),value: ‘北京‘,);
    final DropdownMenuItem item2 = new DropdownMenuItem(child: Text(‘上海‘),value: ‘上海‘,);
    final DropdownMenuItem item3 = new DropdownMenuItem(child: Text(‘广州‘),value: ‘广州‘,);
    final DropdownMenuItem item4 = new DropdownMenuItem(child: Text(‘深圳‘),value: ‘深圳‘,);

    items.add(item1);
    items.add(item2);
    items.add(item3);
    items.add(item4);

    return items;
  }

  @override
  Widget build(BuildContext context) {

    return DropdownButton(
      //提示文本
      hint: Text(‘请选择一个城市‘),
      //下拉列表项数据
      items: generateItemList(),
      value: selectItemValue,
      //下拉三角型图标大小
      iconSize: 48.0,
      //下拉文本样式
      style: TextStyle(
        color: Colors.green,
      ),
      //设置阴影高度
      elevation: 24,
      //将下拉框设置为水平填充成父级
      isExpanded: true,
      //下拉改变事件
      onChanged: (T){
        var obj = T;
      },
    );
  }
}

　　

4.2 FlatButton

一个扁平的 Material 按钮.

FlatButton

            FlatButton.icon(
                onPressed: (){

                },
                icon: Icon(Icons.print,size: 36.0,),
                label: Text(‘默认按钮‘,style: TextStyle(fontSize: 36.0),),
            ),

           FlatButton(
              //文本
              child: Text(
                ‘Success‘,
                style: TextStyle(fontSize: 26.0),
              ),
              //按钮背景色
              color: Colors.green,
              //按钮亮度
              colorBrightness: Brightness.dark,
              //失效时的背景色
              disabledColor: Colors.grey,
              //失效时的文本色
              disabledTextColor: Colors.grey,
              //文本颜色
              textColor: Colors.white,
              //按钮主题 ButtonTheme ButtonThemeData ButtonTextTheme ThemeData
              textTheme: ButtonTextTheme.normal,
              //墨汁飞溅的颜色
              splashColor: Colors.blue,
              //抗锯齿能力
              clipBehavior: Clip.antiAlias,
              //内边距
              padding: new EdgeInsets.only(
                bottom: 5.0,
                top: 5.0,
                left: 20.0,
                right: 20.0,
              ),
            ),

　　

4.3 FloatingActionButton

跟 iOS 手机的小白点一样，一个圆形图标按钮，它悬停在内容之上，以展示应用程序中的主要动作。FloatingActionButton 通常用于Scaffold.floatingActionButton 字段。

FloatingActionButton

        FloatingActionButton(
              //图标
              child: const Icon(Icons.person),
              //提示信息
              tooltip: ‘这是一个自定义的按钮‘,
              //背景色
              backgroundColor: Colors.blue,
              //前景色
              foregroundColor: Colors.white,
              //hero效果使用
              heroTag: null,
              //未点击时的阴影
              elevation: 8.0,
              //点击时的阴影
              highlightElevation: 16.0,
              onPressed: () {},
              // 是否为“mini”类型，默认为false,FAB 分为三种类型：regular, mini, and extended
              mini: false,

              //圆角方形的样式
              shape: RoundedRectangleBorder(
                side: BorderSide(
                  width: 2.0,
                  color: Colors.white,
                  style: BorderStyle.solid,
                ),
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(8.0),
                  topLeft: Radius.circular(8.0),
                  bottomRight: Radius.circular(8.0),
                  bottomLeft: Radius.circular(8.0),
                ),
              ),
            ),

　

4.4 IconButton

一个 Material 图标按钮，点击时会有水波动画。

IconButton

         child: IconButton(
              //图标
              icon: Icon(Icons.print),
              //图标大小
              iconSize: 48.0,
              //根据父容器来决定图标的位置
              alignment: AlignmentDirectional.center,
              color: Colors.green,
              //墨汁飞溅效果
              splashColor: Colors.blue,
              padding: EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
              //提示文本
              tooltip: ‘一个打印图标‘,
              //按下
              onPressed: () {},
            ),

　

4.5 RaisedButton

Material Design 中的 button， 一个凸起的材质矩形按钮。

RaisedButton

  child: RaisedButton(
        //文本
        child: Text(
          ‘点击登录按钮‘,
          style: TextStyle(fontSize: 26.0),
        ),
        //按钮背景色
        color: Colors.green,
        //按钮亮度
        colorBrightness: Brightness.dark,
        //失效时的背景色
        disabledColor: Colors.grey,
        //失效时的文本色
        disabledTextColor: Colors.grey,
        //文本颜色
        textColor: Colors.white,
        //按钮主题 ButtonTheme ButtonThemeData ButtonTextTheme ThemeData
        textTheme: ButtonTextTheme.normal,
        //墨汁飞溅的颜色
        splashColor: Colors.blue,
        //抗锯齿能力
        clipBehavior: Clip.antiAlias,
        //内边距
        padding: new EdgeInsets.only(
          bottom: 5.0,
          top: 5.0,
          left: 20.0,
          right: 20.0,
        ),
        shape: RoundedRectangleBorder(
          side: new BorderSide(
            width: 2.0,
            color: Colors.white,
            style: BorderStyle.solid,
          ),
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(10.0),
            topLeft: Radius.circular(10.0),
            bottomLeft: Radius.circular(10.0),
            bottomRight: Radius.circular(10.0),
          ),
        ),

        onPressed: () {
          print(‘按钮按下操作‘);
        },
      ),

　　

4.6 RawMaterialButton

RawMaterialButton

   body: RawMaterialButton(
          onPressed: (){},
          textStyle: TextStyle(fontSize: 28.0,color: Colors.black,),
          //文本
          child: Text(‘RawMaterialButton组件‘),
          //高亮时的背景色
          highlightColor: Colors.red,
          //墨汁飞溅
          splashColor: Colors.blue,
          //搞锯齿
          clipBehavior: Clip.antiAlias,
          padding: EdgeInsets.only(bottom: 5.0,top: 5.0,left: 30.0,right: 30.0),
          //高亮时的阴影
          highlightElevation: 10.0,
        ),

　　

待续

关于我

更多信息可以点击关于我 , 非常希望和大家一起交流 , 共同进步

　

　

　

原文地址：https://www.cnblogs.com/1157760522ch/p/11564517.html

时间： 2024-08-30 15:08:52

Flutter 开发之组件一的相关文章

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

背景 此篇文章,主要针对想要在原有Native工程的基础上集成Flutter的需求,所提供的混编方案的探讨. 官方方案的优缺点 (1)优点: 不需要每次 Run 起来之后,先进行 同步flutter代码(组件化Flutter后,因为组件化后flutter代码已经变为framework,所以每次进来需要先热更新同步代码)不需要单独搞一个组件进行集成,管理组件的版本,发布等.(2)缺点: 会非常耦合工程,需要修改工程配置,添加 BUILD PHASE 调用 flutter 中 xcode_backe

用Flutter开发的跨平台项目，完美运行在Android和IOS上，Material简洁风格，包括启动页、引导页、注册、登录、首页、体系、公众号、导航、项目，还有漂亮的妹子图库，运行极度流畅，结构清晰，代码规范，值得拥有

Flutter学习资源汇总持续更新中...... Flutter官方网站 Flutter中文网 wendux的Flutter实战 Flutter官方exampleflutter_gallery 阿里巴巴咸鱼团队系列文章 阿里巴巴flutter-go,flutter 开发者帮助 APP,包含 flutter 常用 140+ 组件的demo 演示与中文文档 玩Android跨平台项目 非常有用的Json转Model插件 Flutter-Notebook,提供了很多优秀样例和Demo 前言 这是一款使

Android开发四大组件之Service（实例篇）

关于Service的开发详解已经在上一篇:Android开发四大组件之Service(详解篇)讲的很清楚了,本篇主要对Service的开发实例做下讲解. 程序运行效果图: 程序代码: BindService: package com.jph.servicedemo; import android.app.Service; import android.content.Intent; import android.os.Binder; import android.os.IBinder; /**

iOS开发之组件化架构漫谈

前段时间公司项目打算重构,准确来说应该是按之前的产品逻辑重写一个项目.在重构项目之前涉及到架构选型的问题,我和组里小伙伴一起研究了一下组件化架构,打算将项目重构为组件化架构.当然不是直接拿来照搬,还是要根据公司具体的业务需求设计架构. 在学习组件化架构的过程中,从很多高质量的博客中学到不少东西,例如蘑菇街李忠.casatwy.bang的博客.在学习过程中也遇到一些问题,在微博和QQ上和一些做iOS的朋友进行了交流,非常感谢这些朋友的帮助. 本篇文章主要针对于之前蘑菇街提出的组件化方案,以及cas

个帖子学会Android开发四大组件

黑色幽默Lion 方向比努力重要,能力比知识重要,情商比智商重要! 首页 新闻 新随笔 管理 随笔- 43  文章- 0  评论- 12 一个帖子学会Android开发四大组件 注:本文来自"友盟杯",仅在此阅读,学习 这个文章主要是讲Android开发的四大组件,本文主要分为 一.Activity详解二.Service详解三.Broadcast Receiver详解四.Content Provider详解外加一个重要组件 intent的详解. 一.Activity详解Activty的

Android开发四大组件--Activity详解

Android开发四大组件--Activity详解 - Android开发教程 Android开发的四大组件在开发中应用中是必不可少的,下面就来详解下四大组件之一Activity,总结自网络.Activty的生命周期的也就是它所在进程的生命周期. 一个Activity的启动顺序: onCreate()——>onStart()——>onResume() 当另一个Activity启动时: 第一个Activity onPause()——>第二个Activity onCreate()——>

[Dart] Flutter开发中的几个常用函数

几个Flutter开发中的常用函数 /** 返回当前时间戳 */ static int currentTimeMillis() { return new DateTime.now().millisecondsSinceEpoch; } /** 复制到剪粘板 */ static copyToClipboard(final String text) { if (text == null) return; Clipboard.setData(new ClipboardData(text: text))

C# 开发COM组件供c++使用

C# 开发COM组件供c++使用 Microsoft在解决和以往的COM和SDK开发技术之间的互操作性(Interoperability)方面做了很多的工作,其中包括COM和.NET对象之间的相互调用以及.NET如何调用SDK中的Windows库函数. 本文在学习网上资料的基础上,实现用C#开发组件供C++使用的过程. 编程环境:vs2015 (COM组件) vs2005 c++调用 操作系统 win10 一.C#COM组件 1.新建一个C#类库项目:ExcelCom  (原计划做一个EXCEL

MAC安装flutter开发环境

#最近在学flutter开发,写一篇记录一下安装的过程 1.配置flutter镜像地址  vim ~/.bash_profile 命令行输入后回车,打开.bash_profile配置镜像地址 export PUB_HOSTED_URL=https://pub.flutter-io.cn  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn  (进入后默认是不可编辑的,按a进入编辑模式,下方会出现INSERT) 输入好,按ES