Flutter学习个人总结1

感觉

开发app的时候是使用了Dart中的Flutter框架， 这一专栏的主要记录的是Flutter的学习
Flutter可以说是一切皆组件，给我的感觉是页面的展示都是组件之间的嵌套， 通过一个个组件之间的嵌套，完成了页面的展示功能

无状态组件（StatelessWidget）

无状态意味着在app中是固定的， 不能更改它的属性或值

有状态组件（StatefulWidget）

在这个组件中的数据是可以随时改变的， 一般需要网络数据动态展示时都会用到

Container

Container 在flutter 的功能类似于HTML中的div 组件，是块级组件，可以在这个组件中设置宽高（width， height），和背景颜色, 配合其他组件使用可以限制其他组件的大小，

Container(
   
      color: Colors.blue,
      height: 50.0,
      width: 500.0,
      )

Text

Text 组件是文本组件，在flutter中，类似于标题， 文本这最种数据是不能直接的放在组件中展示的，需要Text组件进行封装，在Text组件中有 style 可以数据Text的属性 TextStyle， 可以设置字体颜色，大小…

child: Text(
        "你好",        
        style: TextStyle(
          color: Colors.white,
          
          // fontSize: 50.0,
        ),

Image

image组件，image可以使用本地的，也可以使用url请求网络上的， Image.asset
使用本地项目中的图片，不过需要在项目中的 pubspec.yaml中配置图片的路径， 可以使用image.network来加载网络图片， Image.network("url")这样来使用，fit: BoxFit.cover可以使用fit属性来将图片自动拉伸， repeat: ImageRepeat.repeatX将图片拉伸，repeatX就是往x轴拉伸，repeatY就是往Y轴拉伸

     child: Image.network("https://api.iehu.cn/Image.php",
          fit: BoxFit.cover, // 将图片自适应到容器， 如 自动拉伸
        
          // repeat: ImageRepeat.repeatX), // 将图片进行填充， X 是往x轴填充

      // decoration: BoxDecoration(   // 容器的背景， decoration 容器 div
      //     color: Colors.blue
      // ),
      )

ClipOval

ClipOval 也是圆组件，主要是将图片设置为圆形， 可以在这个组件中将图片设置宽高，

      child: ClipOval(    // 圆组件
        child: Image.asset(
          "images/2.0x/desk_010.jpg",
          width: 300,
          height: 300,
          fit: BoxFit.cover,
        ),
      ),

child

child是子组件， 可以使用child 创建一个父组件中的子组件，如，

Container(
      
      child: Image.network("https://api.iehu.cn/Image.php",
          fit: BoxFit.cover, // 将图片自适应到容器， 如 自动拉伸
        
          // repeat: ImageRepeat.repeatX), // 将图片进行填充， X 是往x轴填充

      // decoration: BoxDecoration(   // 容器的背景， decoration 容器 div
      //     color: Colors.blue
      // ),
      )
    );

在child中可以创建子组件Image 来获取Image 图片进行展示

children

children是一个类型于子组件的一个组件列表，它是用于在可以多个布局的组件上，如 Listview, Column
， Row 中使用， 它们都是可以布局多个元素的组件， Listview，Column都是垂直布局的组件， Row是水平布局的组件

ListView(    //是一个线性布局的widgets 列表.
      children: <Widget>[  // 代表这是个多种组件列表
        ListTile(
          leading: Image.network("https://api.iehu.cn/Image.php"),
          // leading: Icon(Icons.security,color: Colors.yellow,size: 80,), //icon 图标
          title: Text("这是主标题"), // 当前listtile 标题
          subtitle: Text("这是二级标题"), // 二级标题
        )
        ListTile(
          leading: Image.network("https://api.iehu.cn/Image.php"),
          // leading: Icon(Icons.security,color: Colors.yellow,size: 80,), //icon 图标
          title: Text("这是主标题"), // 当前listtile 标题
          subtitle: Text("这是二级标题"), // 二级标题
        )
      ],
    );

如，在Listview中可以在children 中使用多个组件进行垂直布局