Flutter-UI-基础控件-组件大全_app

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

下面介绍一下Flutter热门控件.

小知识

1.int _currentIndex = 0; 创建带有下划线属性是一个私有属性

StatefulWidget

状态组件因为它有一个setState方法
如果想改变页面中的数据就用StatefulWidget

class HomeContent extends StatefulWidget {

  HomeContent({Key key}) : super(key: key);
  //构造函数   固定写法
  _HomeContentState createState() => _HomeContentState();

}

class _HomeContentState extends State<HomeContent> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }

}

StatelessWidget

无状态组件不能改变控件里面的值，需要传入builder属性惊醒构造组件，在guilder中可以使用stateSetter改变构造子组件的状态，既可以不用创建类而实现一个局部刷新的组件。

class HomeContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }
}

MaterialApp 应用

是一个根组件作为App的根组件相当于每个页面都要加的加了之后页面默认是白色的。不然是黑色的，MaterialApp作为一个顶级组件，包含路由生成器，主题，语言，主页等属性。

属性

属性	注释
home	主页[Widget]
theme	主题
title	任务栏标题例如: ThemeData[] 下面有主题代码
debugShowCheckedModeBanner	开启角标例如: true false
showPerformanceOverlay	开启性能浮层例如: true false
debugShowMaterialGrid	开启网络例如: true false
onGenerateRoute	路由生成器

主题代码：

ThemeData(
   primarySwatch: Colors.blue,//颜色
   visualDensity: VisualDensity.adaptivePlatformDensity,//视觉
),

固定页面结构
return MaterialApp(
// debugShowCheckedModeBanner: true,
// showPerformanceOverlay: true,
// debugShowMaterialGrid: true,
  home: Scaffold(
    appBar: AppBar(
      title: Text('Flutter Demol'),
    ),
    body: HomeContent(),
  ),
  theme: ThemeData(
    primarySwatch: Colors.blue,//修改主题颜色   想导航栏的颜色
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
);

效果

Scaffold 手脚架

说明：一个通用app结构，包括上，下，左，右，中，浮动按键补位，对应位置可盛放组件。
属性：

属性	注释
appBar	头部组件 AppBar(里面包含的属性非常多,点进去就能查看) 常用title 例如：下面有代码
body	内容组件(当前界面所显示的主要内容) 【widget】
drawer	左右滑动组件，抽屉菜单控件
bottomNavigationBar	底部组件例如：下面有代码
endDrawer	右侧滑动组件例如：下面有代码
backgroundColor	背景颜色例如：下面有代码
floatingActionButton	浮动按键例如：下面有代码
floatingActionButtonLocation	浮动按键位置 FloatingActionButtonLocation.endFloat,

floatingActionButtonLocation 用法：

floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
   child: Icon(Icons.add),
   onPressed: (){},
),

endDrawer / drawer 用法：

 endDrawer: Drawer(
   elevation: 1,
   child: Image.asset('https://www.itying.com/images/flutter/2.png',
     width: 100,
     height: 100,
     fit: BoxFit.cover,),
 ),

AppBar 用法

 appBar: AppBar(
    title: Text('Flutter Demo'),
    backgroundColor: Colors.amber,
    centerTitle：true,
    actions: <Widget>[Icon(Icons.star),Icon(Icons.add)],
    bottom: TabBar(//底部导航栏
      isScrollable: true,
      indicatorColor: Colors.orangeAccent,
      tabs: _tabController,
    ),
  ),

Scaffold 全部代码

home:Scaffold(
        endDrawer: Drawer(
          elevation: 1,
          child: Image.asset('https://www.itying.com/images/flutter/2.png',
            width: 100,
            height: 100,
            fit: BoxFit.cover,),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: (){},
        ),
        appBar: AppBar(
          title: Text('Flutter Demo'),
          backgroundColor: Colors.amber,
          actions: <Widget>[Icon(Icons.star),Icon(Icons.add)],
        ),
        body: Center(
          child: Container(
            child: Text(
                'i am is text',
              textAlign: TextAlign.center,
              overflow: TextOverflow.clip,
              softWrap:false,
              style: TextStyle(
                backgroundColor: Colors.amber,
                color: Colors.blue,
                fontSize: 20,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                letterSpacing: 10,
                fontFamily: 'DancingScript',
                decoration: TextDecoration.underline,
                decorationThickness: 3,
                decorationStyle: TextDecorationStyle.wavy,
                decorationColor: Colors.red,
                shadows: [
                  Shadow(
                    color: Colors.cyanAccent,
                    offset:Offset(1,1),
                    blurRadius: 10,
                  ),
                  Shadow(
                    color: Colors.blue,
                    offset:Offset(1,1),
                    blurRadius: 10,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),

Divider 水平分割线

说明：水平分割线可以指定粗细，高度，颜色，左右边距信息。

属性	注释
color	颜色
thickness	粗细
indent	前面空缺长度
endIndent	后面空缺长度
height	站位高

Divider(),//相当于ios的line，是一条线来的

例子：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    var dataColor = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
    var dataLineWidth = [1.0,2.0,3.0,4.0];
    var data = Map.fromIterables(dataColor, dataLineWidth);

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Column(
          children: dataColor.map((e) => Divider(
			color: e,
            thickness: data[e],
            indent: 100,
            endIndent: 10,
            height: 30,
          )).toList(),
        ),
      ),
    );
  }
}

效果：

Center 居中容器

作用:用于中心对齐文字，可容纳一个子组件，并使其居中于父组件，是Align组件的一种精简模式。

属性

属性	注释
child	孩子组件【Widget】

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    var dataColor = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
    var dataLineWidth = [1.0,2.0,3.0,4.0];
    var data = Map.fromIterables(dataColor, dataLineWidth);

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Container(
            width: 50,
            height: 50,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

效果

Text 文本

用于显示文字组件。

属性	说明
textAlign	对齐方式：leftright，center，justify，start，end
overflow	TextOverflow.clip ellipsis 超出一行3个点 fade 超出一行渐变 clip 超出一行裁剪）
maxLines	设置Label的行数例如：3
textScaleFactor	字体放大两倍例如：2
textDirection	文字方向 TextDirection.ltr TextDirection.rtl
softWrap	是否换行 true, false

属性 style	说明: 文字样式 TextStyle()
backgroundColor	背景颜色例如：Colors.amber
color	文字颜色例如：Colors.blue
fontSize	文字大小例如： 20
fontWeight	字重 normal bold w100 w200 … w900 例如：FontWeight.bold
fontStyle	字体样式 italic, normal 例如：FontStyle.italic
letterSpacing	字距例如：10
fontFamily	文字字体例如：‘DancingScript’
shadows	文字【List】例如：下面的阴影代码
decoration	装饰线 none，underline，overline，lineThrough 例如：TextDecoration.underline
decorationThickness	装饰线粗例如：3
decorationStyle	装饰线样式 solid，double，dotted，dashed，wavy 例如：TextDecorationStyle.wavy
decorationColor	颜色例如：Colors.red

阴影代码：

shadows: [
  Shadow(
    color: Colors.cyanAccent,
    offset:Offset(1,1),
    blurRadius: 10,
  ),
  Shadow(
    color: Colors.blue,
    offset:Offset(1,1),
    blurRadius: 10,
  ),
],

例子：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    var dataColor = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
    var dataLineWidth = [1.0,2.0,3.0,4.0];
    var data = Map.fromIterables(dataColor, dataLineWidth);

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Container(
            child: Text(
                'i am is text',
              textAlign: TextAlign.center,
              overflow: TextOverflow.clip,
              softWrap:false,
              style: TextStyle(
                backgroundColor: Colors.amber,
                color: Colors.blue,
                fontSize: 20,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                letterSpacing: 10,
                fontFamily: 'DancingScript',
                decoration: TextDecoration.underline,
                decorationThickness: 3,
                decorationStyle: TextDecorationStyle.wavy,
                decorationColor: Colors.red,
                shadows: [
                  Shadow(
                    color: Colors.cyanAccent,
                    offset:Offset(1,1),
                    blurRadius: 10,
                  ),
                  Shadow(
                    color: Colors.blue,
                    offset:Offset(1,1),
                    blurRadius: 10,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

效果：

Container 容器

容器组件，用于容纳单个子组件。集成了若干个单子组件的功能，入内外边框，变形，装饰，约束等.

属性	注释
child	子组件【Widget】
width	宽
height	高
color	颜色例如：Colors.grey
transform	旋转例如: Matrix4.skew(3.14/10,0)
alignment	对齐定位例如: Alignment.bottomRight
padding	内边距例如：EdgeInsets.all(10)
margin	外边距例如：EdgeInsets.all(10)
decoration	装饰边线，圆弧，颜色，渐变色，阴影，图片等内容

decoration 使用

decoration: BoxDecoration(
  gradient: LinearGradient(
    stops: stops,
    colors: rainbow.map((e) => Color(e)).toList()
  ),
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(50),
    bottomRight: Radius.circular(50)
  ),
  boxShadow: [
    BoxShadow(
        color: Colors.grey,
        offset: Offset(1,1),
        blurRadius: 10,
        spreadRadius: 1
    )
  ]
),

效果

Container的使用

child: Container(
  child: Text('fenghanxuqwertyuiopasdfgjkgh'),
  height: 300,
  width: 300,
  decoration: BoxDecoration(
     color: Colors.blue,//容器背景颜色
     border: Border.all(
              color: Colors.green,//边框颜色
              width: 2//边框宽度
     ),
     borderRadius: BorderRadius.all(Radius.circular(10.0),),//设置容器圆角
  ),
//padding: EdgeInsets.all(20),//容器之间的内边距
  padding: EdgeInsets.fromLTRB(20, 20, 20, 20),//容器之间的内边距
//margin: EdgeInsets.all(20), //容器之间的外距离
  margin:  EdgeInsets.fromLTRB(20, 20, 20, 20),//容器之间的外距离
//transform: Matrix4.translationValues(10, 10, 10),//容器位移
//transform: Matrix4.rotationZ(0.3),//旋转 Matrix4.rotationX(0.3), Matrix4.rotationY(0.3),
//transform: Matrix4.diagonal3Values(0.5, 0.5, 0.5),//缩放倍数
  alignment: Alignment.bottomRight,//内容相对容器的对齐方式
),

Image 图片

用于显示一张图片，可以从文件，内存，网络，资源里加载，可以指定适应方式，样式，颜色混合模式，重复模式等.

属性	注释
asset	加载资源图片例如：本地图片网络图片
color	图片背景颜色例如: Colors.yellow
colorBlendMode	图片混合模式 BlendMode.colorBurn
fit	显示效果例如: BoxFit.cover cover:自适应 fill:铺满可能变形 fitWidth:宽充满 filHright:高充满 repeat:多张图片平铺
alignment	图片相对容器的对齐方式例如: Alignment.bottomRight
centerSlice	保留区域例如：Rect.fromLTRB(9, 27, 60, 27 + 1.0)
repeat	图片重复模式 ImageRepeat

fit属性
大图：

小图

repeat属性图片重复模式

centerSlice属性保留区域

alignment属性

网络图片加载不成功两个问题：
1.是否连接wifi
2.重新烧录需要点击是否同意访问网络
3.url是否有效
加载网络图片

child: Image.network(
  'https://www.itying.com/images/upload/Image/3333333.png',
  alignment: Alignment.bottomRight,//图片相对容器的对齐方式
  color: Colors.yellow,//图片背景颜色
  colorBlendMode: BlendMode.colorBurn,//图片混合模式
  fit: BoxFit.cover,//显示效果 cover  自适应 fill  铺满可能变形 fitWidth 宽充满 filHright 高充满 repeat 多张图片平铺
),

图片切圆方法
加载网络图片

child: Container(
  child: ClipOval(
    child: Image.asset('https://www.itying.com/images/flutter/2.png',
    width: 100,
    height: 100,
    fit: BoxFit.cover,),
  ),
),

导入本地图片

child: Container(
  child: ClipOval(
    child: Image.asset('images/NahuoLogo1024.png',
    width: 100,
    height: 100,
    fit: BoxFit.cover,),
  ),
),

ListView 列表

列表显示的核心控件，容纳多个子组件，可以通过builder,separeted,custom等构造.有内边距，是否反向，滑动控制器等属性。

属性	注释
separatorBuilder	条目构造器
children	子组件列表
padding	内边距例如：EdgeInsets.all(10)
itemCount	条目个数
itemBuilder	条目构造器
scrollDirection	滑动方向例如：Axis.horizontal
reverse	是否反向滑动
shrinkWrap	无边界时是否包裹

separatorBuilder | 条目构造器的用法：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  final data = <Color>[
    Colors.purple[50],
    Colors.purple[100],
    Colors.purple[200],
    Colors.purple[300],
    Colors.purple[400],
    Colors.purple[500],
    Colors.purple[600],
    Colors.purple[700],
    Colors.purple[800],
    Colors.purple[900],
  ];


  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
          backgroundColor: Colors.blue,
        ),
        body: Container(
          height: 200,
          child: ListView.separated(
              itemBuilder: (content, index) => _buildItem(data[index]),
              separatorBuilder: (context, index) => Divider(
                thickness: 1,
                height: 1,
                color: Colors.orangeAccent,
              ),
              itemCount: data.length),
        ),
      ),
    );
  }

  String colorString(Color color) => "#${color.value.toRadixString(16).padLeft(8,'0').toUpperCase()}";

  Widget _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 50,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [Shadow(color: Colors.black, offset: Offset(0.5, 0.5),blurRadius: 2)]),
    ),
  );
  
}

效果：

children | 子组件列表用法：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  final data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];
  
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
          backgroundColor: Colors.blue,
        ),
        body: ListView(
          padding: EdgeInsets.symmetric(horizontal: 5),
          children: data.map((color) => Container(
            alignment: Alignment.center,
            width: 100,
            height: 50,
            color: color,
            child: Text(
              colorString(color),
              style: TextStyle(color: Colors.white,shadows: [
                Shadow(color: Colors.black, offset: Offset(0.5, 0.5),blurRadius: 2)
              ]),
            ),
          )).toList(),
        ),
      ),
    );
  }

  String colorString(Color color) => "#${color.value.toRadixString(16).padLeft(8,'0').toUpperCase()}";

}

itemBuilder | 条目构造器用法

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  final data = <Color>[
    Colors.purple[50],
    Colors.purple[100],
    Colors.purple[200],
    Colors.purple[300],
    Colors.purple[400],
    Colors.purple[500],
    Colors.purple[600],
    Colors.purple[700],
    Colors.purple[800],
    Colors.purple[900],
  ];

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
          backgroundColor: Colors.blue,
        ),
        body: ListView.builder(
          itemCount: data.length,
          itemBuilder: (context, index) => _buildItem(data[index]),
        ),
      ),
    );
  }

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";

  Widget _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 50,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
      ]),
    ),
  );

}

最简单的列表

    return ListView(
//      scrollDirection: Axis.horizontal,//设置水平列表
      padding: EdgeInsets.all(10),//设置上下左右间距20
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.home,color: Colors.blue,size: 40,),//加载系统图标
          title: Text(
            'fenghanxu',
            style: TextStyle(
              fontSize: 20,
            ),
          ),
          subtitle: Text('subtitleFenghanxu'),
          trailing: Icon(Icons.search,color: Colors.blue,size: 40,),
        ),
        ListTile(
          leading: Image.network('https://www.itying.com/images/flutter/1.png'),//加载网络图片
          title: Text('fenghanxu'),
          subtitle: Text('subtitleFenghanxu'),
        ),
      ],
    );

效果：

通过for循环实现动态遍历ListItem列表

class _MyHomePageState extends State<MyHomePage> {

  List<Widget> _getData(){
    List<Widget> list = new List();
    for(var i = 0; i < 20; i++){
      list.add(ListTile(
        title: Text('i am is $i list'),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ListView(
//      scrollDirection: Axis.horizontal,//设置水平列表
          padding: EdgeInsets.all(10),//设置上下左右间距20
          children: _getData(),
        ),
      ),
    );
  }
}

效果：

GridView 网格

说明：容纳多个组件，并以网格的方式。可以通过count，extent,count,builder等构造方法。有内边距，是否反向，滑动控制器的属性。

属性	注释
maxCrossAxisExtent	box轴向长度【double】
reverse	是否反向滑动【bool】
shrinkWrap	无边界时是否包裹【bool】

children	子组件列表【List】
crossAxisCount	主轴一行box数量【int】
mainAxisSpacing	主轴每行间距【double】
crossAxisSpacing	交叉轴每行间距【double】
childAspectRatio	box主长/交叉轴长【double】

itemCount	条目数量【int】
gridDelegate	【网格代理】
itemBuilder	【条目构造器】

GridView. extent 构造

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
          backgroundColor: Colors.blue,
        ),
        body: ExtentGridView(),
      ),
    );
  }
}

class ExtentGridView extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFF00FFFF - 2*i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView.extent(
        scrollDirection: Axis.horizontal,
        maxCrossAxisExtent: 80.0,
        mainAxisSpacing: 2,
        crossAxisSpacing: 2,
        childAspectRatio: 0.618,
        children: data
            .map((color) => _buildItem(color))
            .toList(),
      ),
    );
  }

  Container _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 30,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(
            color: Colors.black,
            offset: Offset(.5, .5),
            blurRadius: 2)
      ]),
    ),
  );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

GridView.count 静态网格布局

class CustomGridView extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFFFF00FF - 2*i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView.count(
        crossAxisCount: 4,
        mainAxisSpacing: 2,
        crossAxisSpacing: 2,
        childAspectRatio: 1/0.618,
        children: data
            .map((color) => _buildItem(color))
            .toList(),
      ),
    );
  }

  Container _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 30,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(
            color: Colors.black,
            offset: Offset(.5, .5),
            blurRadius: 2)
      ]),
    ),
  );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

GridView.builder 动态网格布局

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
          backgroundColor: Colors.blue,
        ),
        body: BuilderGridView(),
      ),
    );
  }
}

class BuilderGridView extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFF33FFF - 2*i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView.builder(
          itemCount: data.length,
          scrollDirection: Axis.vertical,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(//网格代理：定交叉轴数目
              crossAxisCount: 4,//条目个数
              mainAxisSpacing: 5,//主轴间距
              crossAxisSpacing: 5,//交叉轴间距
              childAspectRatio:1/0.618),
          itemBuilder: (_, int position)=> _buildItem(data[position])
      ),
    );
  }

  Container _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 30,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(
            color: Colors.black,
            offset: Offset(.5, .5),
            blurRadius: 2)
      ]),
    ),
  );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

BoxDecoration 边框

BoxDecoration(
     color: Colors.blue,//容易背景颜色
     border: Border.all(
              color: Colors.green,//边框颜色
              width: 2//边框宽度
     ),
     borderRadius: BorderRadius.all(Radius.circular(10.0),),//设置容器圆角
  )

SizedBox 定尺寸盒

可容纳一个子组件，通过制定宽高限定子组件容身区域

属性	注释
child	孩子组件【Widget】
width	宽【double】
height	高【double】

SizedBox( height: 20,)//图片跟文字的间距是20

Padding 外边框控件

可容纳一个子组件，添加自身内边距来限制孩子组件的站位，核心属性未padding

属性	注释
child	孩子组件【Widget】
EdgeInsets.only(top:10,left: 10)	单独边距
EdgeInsets.symmetric(vertical: 30,horizontal: 10)	方向边距
EdgeInsets.all(20)	四面等边距
EdgeInsets.fromLTRB(10, 10, 0, 0)	四周单独设置

单独边距

child: Padding(
   padding: EdgeInsets.only(top:10,left: 10),
   child: _buildChild(),
 ),

方向边距

child: Padding(
   padding: EdgeInsets.symmetric(vertical: 30,horizontal: 10),
   child: _buildChild(),
 ),

四面等边距

  child: Padding(
    padding: EdgeInsets.all(20),
    child: _buildChild(),
  ),

四周单独设置

return Padding(
  padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
  child: Image.network(
      'https://www.itying.com/images/flutter/1.png', fit: BoxFit.cover),
);

Row 水平布局控件

排布方向为横向的flex布局，可容纳多个组件，其他属性全部一致

属性	注释
children	组件列表【List】
mainAxisAlignment	主轴对齐例如：MainAxisAlignment.spaceEvenly
crossAxisAlignment	交叉轴对齐例如：CrossAxisAlignment.end
textBaseline	文字基线
verticalDirection	竖直方向例如：VerticalDirection.down
mainAxisSize	主轴尺寸例如：MainAxisSize.max MainAxisSize.min

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
          backgroundColor: Colors.blue,
        ),
        body: CustomRow(),
      ),
    );
  }
}

class CustomRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 70,
        color: Color(0x4484FFFF),
        child: Row(
          children: <Widget>[
            Padding(
              child: Icon(
                Icons.add_location,
                size: 30,
                color: Colors.pink,
              ),
              padding: EdgeInsets.only(left: 25, right: 20),
            ),
            Expanded(
              child: Text(
                "附近",
                style: TextStyle(fontSize: 18),
              ),
            ),
            Padding(
              child: Icon(Icons.keyboard_arrow_right, color: Colors.black38),
              padding: EdgeInsets.only(right: 25),
            ),
          ],
        ));
  }
}

Column 垂直布局控件

排布方向为竖向的flex布局，可容纳多个组件，其他属性全部一致

属性	注释
children	组件列表【List】
mainAxisAlignment	主轴对齐例如：MainAxisAlignment.spaceEvenly
crossAxisAlignment	交叉轴对齐例如：CrossAxisAlignment.end
textBaseline	文字基线
verticalDirection	竖直方向例如：VerticalDirection.down
mainAxisSize	主轴尺寸例如：MainAxisSize.max MainAxisSize.min

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
          backgroundColor: Colors.blue,
        ),
        body: CustomColumn(),
      ),
    );
  }
}

class CustomColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildTitle(),
        _buildContent(context),
      ],
    );
  }

  Widget _buildTitle() {
    return Container(
        height: 70,
        color: Color(0x4484FFFF),
        child: Row(
          children: <Widget>[
            Padding(
              child: Icon(
                Icons.add_location,
                size: 30,
                color: Colors.pink,
              ),
              padding: EdgeInsets.only(left: 25, right: 20),
            ),
            Expanded(
              child: Text(
                "附近",
                style: TextStyle(fontSize: 18),
              ),
            ),
            Padding(
              child: Icon(Icons.keyboard_arrow_right, color: Colors.black38),
              padding: EdgeInsets.only(right: 25),
            ),
          ],
        ));
  }

  Widget _buildContent(ctx) => Container(
    width: MediaQuery.of(ctx).size.width,
    color: Colors.orangeAccent,
    height: 100,
    child: Icon(
      Icons.android,
      size: 50,
      color: Colors.white,
    ),
  );
}

Expanded 延展组件

父类是Flexble，相当于一个fit类型为tight的Flexble组件，可嵌套孩子利用剩余空间对站位空间进行延展。

属性	注释
child	孩子【Widget】
flex	剩余控件分配占比【int】

return Container(
  width: 400,
  height: 100,
  color: Colors.pink,
  child: Row(
    //center start end  spaceAround 两边留固定空隙  spaceBetween 中间留空隙 spaceEvenly  两边留平均空隙
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,//X轴的显示方式
    //crossAxisAlignment: CrossAxisAlignment.end,//Y轴的显示方式 要用一个参考物用的比较小
    children: <Widget>[
      Expanded(
        flex: 1,
        child: IconContainer(Icons.search,color: Colors.blue,size: 30,),
      ),
      Expanded(
        flex: 2,
        child: IconContainer(Icons.home,color: Colors.yellow,size: 30,),
      ),
    ],
  ),
);

Stack 堆叠布局

可容纳多个组件，以堆叠的方式摆放组件，后者居中，拥有alignment属性，可与Positioned组件联合使用，精确定位。

属性	注释
children	组件列表【List】
textDirection	孩子的布局方向例如：TextDirection.rtl
alignment	对齐方式例如：Alignment.topRight
overflow	溢出模式
fit	适应模式例如：StackFit.loose

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
          backgroundColor: Colors.blue,
        ),
        body: CustomStack(),
      ),
    );
  }
}

class CustomStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var yellowBox = Container(
      color: Colors.yellow,
      height: 100,
      width: 100,
    );

    var redBox = Container(
      color: Colors.red,
      height: 90,
      width: 90,
    );

    var greenBox = Container(
      color: Colors.green,
      height: 80,
      width: 80,
    );

    var cyanBox = Container(
      color: Colors.cyanAccent,
      height: 70,
      width: 70,
    );

    return Container(
      width: 200,
      height: 120,
      color: Colors.grey.withAlpha(33),
      child: Stack(
        textDirection: TextDirection.rtl,
        fit: StackFit.loose,
        alignment: Alignment.topRight,
        // overflow: Overflow.clip, // 1.22.0 被去除
        children: <Widget>[yellowBox, redBox, greenBox, cyanBox],
      ),
    );
  }
}

Stack配合Align 使用 Stack 它可以控制子组件的位置

return  Center(
  child: Container(
    height: 400.0,
    width: 300.0,
    color: Colors.red,
    child: Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Align(
          alignment: Alignment.topLeft,
          child: Icon(Icons.home,size: 40,color: Colors.white),
        ),
        Align(
          alignment: Alignment.center,
          child: Icon(Icons.search,size: 40,color: Colors.white),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Icon(Icons.select_all,size: 40,color: Colors.white),
        ),
        Align(
          alignment: Alignment(1.0,-0.2),
          child: Icon(Icons.security,size: 40,color: Colors.white),
        ),
      ],
    ),
  ),
);

Positioned组件只能用于Stack 中，可以指定左右上下的距离对某个组件进行位置精确安放。
Stack配合Positioned 使用 Stack 它可以控制子组件的位置

return  Center(
  child: Container(
    height: 400.0,
    width: 300.0,
    color: Colors.red,
    child: Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Positioned(
          left: 10,
          child: Icon(Icons.home,size: 40,color: Colors.white),
        ),
        Positioned(
          bottom: 0,
          left: 100,
          child: Icon(Icons.search,size: 40,color: Colors.white),
        ),
        Positioned(
          right: 10,
          top: 10,
          child: Icon(Icons.select_all,size: 40,color: Colors.white),
        ),
        Positioned(
          bottom: 10,
          left: 10,
          child: Icon(Icons.security,size: 40,color: Colors.white),
        ),
      ],
    ),
  ),
);

AspectRatio 比例盒

可容纳一个子组件，通过指定宽高比AspectRatio，来限定子组件容身区域。
用于设置子控件是父控件的屏幕比例
AspectRatio的作用是调整child到设置的宽高比

属性	注释
child	孩子组件【Widget】
aspectRatio	宽高比例【double】

import 'package:flutter/material.dart';
class CustomAspectRatio extends StatefulWidget {
  @override
  _CustomAspectRatioState createState() => _CustomAspectRatioState();
}

class _CustomAspectRatioState extends State<CustomAspectRatio> {
  var _ratio = 0.75;

  @override
  Widget build(BuildContext context) {
    var child = Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 50,
      height: 50,
      child: Text("Static"),
    );

    var box = AspectRatio(
      aspectRatio: _ratio,
      child: Container(
          color: Colors.orange,
          child: Icon(
            Icons.android,
            color: Colors.white,
          )),
    );

    return Column(
      children: <Widget>[
        _buildSlider(),
        Container(
          color: Colors.grey.withAlpha(22),
          width: 300,
          height: 100,
          child: Row(
            children: <Widget>[child, box, child],
          ),
        ),
      ],
    );
  }

  Widget _buildSlider() => Slider(
      divisions: 20,
      min: 0.1,
      max: 2.0,
      label: _ratio.toStringAsFixed(2),
      value: _ratio,
      onChanged: (v) => setState(() => _ratio = v));
}

Card 卡片组件底部带阴影组件

基于Material组件实现，用于将单个组件卡片化，并使其具有投影效果。可加外边框，可以自定义卡片形状。

属性	注释
shape	形状
margin	外边距【double】
color	颜色
child	孩子
elevation	影深【double】

shape 形状属性的使用

import 'package:flutter/material.dart';
import '../../../../app/utils/pather.dart';
class ShapeCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Color(0xffB3FE65),
      elevation: 6,
      shape: StarShapeBorder(),
      child: Container(
        alignment: Alignment.center,
        width: 100,
        height: 100,
        child: Text("Card", style: TextStyle(fontSize: 20)),
      ),
    );
  }
}

class StarShapeBorder extends ShapeBorder {
  @override
  EdgeInsetsGeometry get dimensions => null;

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    return null;
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) =>
      Pather.create.nStarPath(9, 50, 40, dx: 50, dy: 50);

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
  }

  @override
  ShapeBorder scale(double t) {
    return null;
  }
}

效果

elevation | 影深【double】属性的使用

import 'package:flutter/material.dart';
class CustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Color(0xffB3FE65),
      elevation: 4,
      margin: EdgeInsets.all(10),
      child: Container(
        alignment: Alignment.topLeft,
        width: 200,
        height: 0.618*200,
        margin: EdgeInsets.all(10),
        child: Text("Card", style: TextStyle(fontSize: 20)),
      ),
    );
  }
}

效果

return Card(
  margin: EdgeInsets.all(10),
  child: Column(
    children: <Widget>[
      ListTile(
        title: Text('张三',style: TextStyle(fontSize: 28)),
        subtitle: Text('高级工程师'),
      ),
      ListTile(
        title: Text('电话：15989954385'),
      ),
      ListTile(
        title: Text('地址： 逢简冯家大街'),
      )
    ],
  ),
);

效果

RaisedButton 浮起按钮

有阴影的浮起按钮，基于MaterialButton实现，所有属性和MaterialButton类似。

属性	注释
color	颜色
splashColor	水波纹颜色
elevation	影深
child	子组件
textColor	子组件颜色
highlightColor	长按高亮色
padding	内边距
onPressed	点击事件例如： onPressed: (){}

import 'package:flutter/material.dart';
class CustomRaisedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: Colors.blue,
      splashColor: Colors.green,
      onPressed: () {},
      child: Text("RaisedButton"),
      textColor: Color(0xffFfffff),
      padding: EdgeInsets.all(8),
      elevation: 5,
      highlightColor: Color(0xffF88B0A),
    );
  }
}

Wrap 滑页栏

可容纳多个组件，按照指定方向依次排布，可以很方便处理孩子的间距，当越界时可以自动换行，拥有主轴和交叉轴的对齐方式，比较灵活。
可以做不等宽按键布局

属性	注释
child	子组件【Widget】
spacing	主轴条目间距【double】
runSpacing	交叉轴条目间距【double】
direction	主轴对齐【Axis】
verticalDirection	竖值方向
textDirection	文字方向
alignment	主轴对齐
crossAxisAlignment	交叉轴对齐

import 'package:flutter/material.dart';
class DirectionWrap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
        children: Axis.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 100,
              color: Colors.grey.withAlpha(33),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }
  final yellowBox = Container(
    color: Colors.yellow,
    height: 30,
    width: 50,
  );

  final redBox = Container(
    color: Colors.red,
    height: 40,
    width: 40,
  );
  final greenBox = Container(
    color: Colors.green,
    height: 40,
    width: 20,
  );
  final blackBox = Container(
    color: Colors.black,
    height: 10,
    width: 10,
  );
  final purpleBox = Container(
    color: Colors.purple,
    height: 20,
    width: 20,
  );
  final orangeBox = Container(
    color: Colors.orange,
    height: 80,
    width: 20,
  );
  final cyanBox = Container(
    color: Colors.cyanAccent,
    height: 10,
    width: 20,
  );

  _buildItem(mode) => Wrap(
    direction: mode,
    runSpacing: 10,
    spacing: 10,
    children: <Widget>[
      yellowBox, redBox, greenBox, cyanBox,
      blackBox, purpleBox, orangeBox,
    ],
  );
}

verticalDirection | 竖值方向的属性使用

textDirection | 文字方向的属性使用

alignment | 主轴对齐的属性使用

crossAxisAlignment | 交叉轴对齐的属性使用

BarNavigationView 底部导航栏

import 'package:flutter/material.dart';
import 'res/listData.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Tabs(),
    );
  }
}


//StatefulWidget
class Tabs extends StatefulWidget {

  Tabs({Key key}) : super(key: key);

  _TabsState createState() => _TabsState();

}

class _TabsState extends State<Tabs> {

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Demol'),),
      body: HomePage(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap: (int index){
          setState(() {
            this._currentIndex = index;
          });
        },
        iconSize:36.0,//icon大小
        fixedColor:Color.red,//icon颜色
        type:BottomNavigationBarType.fixed,//设置tabbar可以有多个按钮
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text('分类'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('设置'),
          ),
        ],
      ),
    );
  }

}

class HomePage extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text('fenghanxu'),
    );
  }

}

缺小：tabbar底部导航栏切换控制器Demol 30视频。

route 路由

基本路由不带参数

return Container(
  child: Center(
    child: RaisedButton(
      child: Text('按键-搜索'),
      color: Theme.of(context).accentColor,
      textTheme: ButtonTextTheme.primary,
      onPressed: (){
       //路由
        Navigator.of(context).push(
            MaterialPageRoute(
                builder: (context)=>searchPage()
            )
        );
      },),
  ),
);

基本路由带参数

return Container(
  child: Center(
    child: RaisedButton(
      child: Text('按键-搜索'),
      color: Theme.of(context).accentColor,
      textTheme: ButtonTextTheme.primary,
      onPressed: (){
      //路由
        Navigator.of(context).push(
            MaterialPageRoute(
                builder: (context)=>searchPage(title: 'sendToTitle',)
            )
        );
      },),
  ),
);

返回pop

Navigator.of(content).pop();

命名路由

搜索控制器代码

路由代码

跳转不带参数

跳转带参数

路由替换
路由替换用下一个控制器替换当前控制器不断替换回来根目录就是跳转之后返回的时候上一个控制器被销毁了

Navigator.of(context).pushReplacementNamed('/login');

普通路由跳转回根目录

Navigator.of(context).pushAndRemoveUntil(
  new MaterialPageRoute(builder: (context) => new Tabs(index: 0,)),
    (route) => route == null
);

AppBar 应用头栏

一个应用顶部栏的通用结构，可在指定的部位放置相应的组件，常用于Scaffold组件中。

属性	注释
leading	左侧组件【Widget】
title	中间组件【Widget】
actions	右侧组件【LIstanbul】
elevation	影深【double】
shape	形状【ShapBorder】
backgroundColor	影深-背景颜色
centerTitle	中间是否居中【bool】
bottom	底部组件

return Scaffold(
  appBar: AppBar(
    title: Text('Hello Flutter'),
    backgroundColor: Colors.red,
    centerTitle: true,//标题居中显示
    leading: IconButton(
        icon: Icon(Icons.menu),
        onPressed: (){
          print('点击左边按键');
    }),
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.search),
          onPressed: (){
            print('点击右边按键1');
          }),
      IconButton(
          icon: Icon(Icons.settings),
          onPressed: (){
            print('点击右边按键2');
          }),
    ],
  ),
  body: Center(
    child: Container(
      child: Text('hello flutter'),
    ),
  ),
);

TabBar切换普通控制器顶部

可滑动和点击标签栏，通常用于AppBar的底部，可与TabBarView联用，实现滑页效果。
TabBar基础使用

属性	注释
contorller	控制器
indictiorColor	指示器颜色
indicatorWeight	指示器高
indicatorPadding	指示器边距【EdgensetsGeometry】
indicatorSize	指示器大小计算方式，TabbarIndicatorSize.label跟文字等宽 TabbarIndicatorSize.tab跟每个tab等宽
labekStyle	页签文字样式
labelColor	选中label颜色
labelPadding	每个label的padding值
unselectedLabelColor	未选中文字颜色
unselectedLabelStyle	未选中文字样式
isScrollable	是否可滑动
onTap	页签点击回调
tabs	标签组件

注意：通常设置Theme可实现无水波纹，讲Theme关于水波纹的颜色设置为透明即可。

class _categoryPageState extends State<categoryPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Row(
              children: <Widget>[
                Expanded(
                    child: TabBar(
                        indicatorColor: Colors.white,//选中Label颜色
                        labelColor: Colors.white,//选中文字颜色
                        unselectedLabelColor: Colors.white,//未选中文字颜色
                        indicatorSize: TabBarIndicatorSize.label,//指示器长度
                        isScrollable: true,//如果多个按钮的话可以滑动
                        tabs: <Widget>[
                           Tab(text: '军事'),
                           Tab(text: '经济'),
                    ]))
              ],
            ),
            centerTitle: true, //标题居中显示
          ),
          body: TabBarView(children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('第一行'),
                ),
                ListTile(
                  title: Text('第二行'),
                ),
                ListTile(
                  title: Text('第三行'),
                ),
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('第一行'),
                ),
                ListTile(
                  title: Text('第二行'),
                ),
                ListTile(
                  title: Text('第三行'),
                ),
              ],
            )
          ]),
        ));
  }
}

视频35(看3分之一) 有一个更好的tabbar切换方式没有写源码

Drawer 侧边栏

一般用于Scaffold中的draw和endDraw属性作为左右的滑页栏，可以容纳一个子组件，能指定影深。
属性：

属性	注释
child	子组件
elevation	影深【double】

DrawerHeader

class _formPageState extends State<formPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      floatingActionButton: FloatingActionButton(
          child: Text('Back'),
          onPressed: () {
            Navigator.of(context).pop();
          }),
      appBar: AppBar(
        title: Text('from'),
      ),
      body: Container(
        child: Center(
          child: RaisedButton(
            child: Text('按键-登录2'),
            color: Theme.of(context).accentColor,
            textTheme: ButtonTextTheme.primary,
            onPressed: () {
              Navigator.pushNamed(context, '/login');
//              Navigator.of(context).pushReplacementNamed('/login');
            },
          ),
        ),
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                    child: DrawerHeader(
                  child: Text('hello flutter'),
                  decoration: BoxDecoration(
                      color: Colors.blue,//设置头部背景颜色
                      image: DecorationImage(
                          image: NetworkImage(
                              'https://www.itying.com/images/flutter/2.png'),//设置头部背景图片
                          fit: BoxFit.cover)),//图片平铺
                ))
              ],
            ),
            ListTile(
              title: Text('我的空间'),
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
            ),
            Divider(),
            ListTile(
              title: Text('我的收藏'),
              leading: CircleAvatar(
                child: Icon(Icons.search),
              ),
            ),
            Divider(),
            ListTile(
              title: Text('我的记录'),
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
            ),
            Divider(),
            ListTile(
              title: Text('我的订单'),
              leading: CircleAvatar(
                child: Icon(Icons.headset),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

UserAccountsDrawerHeader 侧边栏里面的属性(固定样式)

class _formPageState extends State<formPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      floatingActionButton: FloatingActionButton(
          child: Text('Back'),
          onPressed: () {
            Navigator.of(context).pop();
          }),
      appBar: AppBar(
        title: Text('from'),
      ),
      body: Container(
        child: Center(
          child: RaisedButton(
            child: Text('按键-登录2'),
            color: Theme.of(context).accentColor,
            textTheme: ButtonTextTheme.primary,
            onPressed: () {
              Navigator.pushNamed(context, '/login');
//              Navigator.of(context).pushReplacementNamed('/login');
            },
          ),
        ),
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                    child: UserAccountsDrawerHeader(
                       accountName: Text('Hello Flutter'),//设置标题
                       accountEmail: Text('Hello Flutter'),//设置副标题
                       currentAccountPicture: CircleAvatar(
                         backgroundImage: NetworkImage('https://www.itying.com/images/flutter/3.png'),//设置头像
                       ),
                      decoration: BoxDecoration(
                        color: Colors.green[900],//设置背景颜色
                        image: DecorationImage(image: NetworkImage('https://www.itying.com/images/flutter/4.png'),fit: BoxFit.cover)//设置背景图片
                      ),
                      otherAccountsPictures: <Widget>[
                        Image.network('https://www.itying.com/images/flutter/5.png'),//图片到右上角
                        Image.network('https://www.itying.com/images/flutter/1.png')//图片到右上角
                      ],
                ))
              ],
            ),
            ListTile(
              title: Text('我的空间'),
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
            ),
            Divider(),
            ListTile(
              title: Text('我的收藏'),
              leading: CircleAvatar(
                child: Icon(Icons.search),
              ),
            ),
            Divider(),
            ListTile(
              title: Text('我的记录'),
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
            ),
            Divider(),
            ListTile(
              title: Text('我的订单'),
              leading: CircleAvatar(
                child: Icon(Icons.headset),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

侧边栏的路由跳转

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/994149.html

Flutter-UI-基础控件-组件大全

发表评论

评论列表（0条）