Flutter相关

Flutter之常用布局组件

2019-03-14  本文已影响0人  wayDevelop

项目演示github地址

Flutter for Android 开发者

用Android布局的角度来看Flutter

Flutter控件 Android控件
AppBar ActionBar/ToolBar
ListView,GridView ListView/RecyclerView
Text TextView
Center ViewGroup
Container RelativeLayout
FloatingActionButton FloatingActionButton(design库里面的)
BottomNavigationBar BottomNavigation(design库里面的)
RaisedButton/Button Button
Column LinearLayout的android:orientation="vertical"
Row android:orientation="horizontal"
DecorationImage ImageView
Image ImageView
Stack FrameLayout/RelativeLayout
Algin alginParentXXX属性
resizeToAvoidBottomPadding android:windowSoftInputMode=”adjustResize属性
SingleChildScrollView ScrollView
Stack FrameLayout
SizeBox Layout固定宽高
Alignment 对齐方式
CustomScrollerView，slivers 复杂的滑动嵌套布局
SliverAppBar CollapsingToolbarLayout，实现AppBar展开/收起的功能， 相对于 AppBar 位置的固定的应用最上面的；而 SliverAppBar 是可以跟随内容滚动的。
Positioned 确定某一个View的具体坐标
Expanded Row、Column、Flex会被Expanded撑开，充满主轴可用空间。
Clip 小碎片，类似流式布局里面的Item
Warp 包裹的小部件超过屏幕宽度后换行
Step 步骤，类似快递物流效果
Card 类似CardView效果
ClipRRect 给图片加圆角
ListTile 固定样式的view 左边图片 右边可设置标题 副标题
DataTable 表格 参考
PaginatedDataTable 分页表格参考

Flutter控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，例如，Container是一种常用的控件，由负责布局、绘画、定位和大小调整的几个控件组成，具体来说，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件组成，而不是将Container子类化来产生自定义效果，您可以用这种新颖的方式组合这些以及其他简单的控件。

在写应用程序时，经常会使用StatelessWidget和StatefulWidget编写新控件，两者的差别在于你是否要管理控件的状态。一个控件的主要任务是实现build函数，定义控件中其他较低层次的控件。build函数将依次构建这些控件，直到底层渲染对象。

Scaffold 实现了基本的Material Design布局结构。也就是说， MaterialApp 的 child 是 Scaffold Widget。
在Material设计中定义的单个界面上的各种布局元素，在 Scaffold 中都有支持，比如 左边栏（Drawers）、snack bars、以及 bottom sheets。
Scaffold 有下面几个主要属性：

1、appBar：显示在界面顶部的一个 AppBar，也就是 Android 中的 ActionBar 、Toolbar。
2、body：当前界面所显示的主要内容 Widget。
3、floatingActionButton：Material设计中所定义的 FAB，界面的主要功能按钮。
4、persistentFooterButtons：固定在下方显示的按钮，比如对话框下方的确定、取消按钮。
5、drawer：侧边栏控件。
6、backgroundColor： 内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor 的值。
7、bottomNavigationBar： 显示在页面底部的导航栏。
8、resizeToAvoidBottomPadding：类似于 Android 中的
9、android:windowSoftInputMode=”adjustResize”，控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

AppBar 和 SliverAppBar 是Material Design中的 App Bar，也就是 Android 中的 Toolbar，关于 Toolbar 的设计指南请参考Material Design中 Toolbar 的内容。
AppBar 和 SliverAppBar 都是继承StatefulWidget 类，都代表 Toobar，二者的区别在于 AppBar 位置的固定的应用最上面的；而 SliverAppBar 是可以跟随内容滚动的。

他们的主要属性如下：
1、 leading：在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮
2、 title： Toolbar 中主要内容，通常显示为当前界面的标题文字。
3、actions：一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用。4、IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单。
5、 bottom：一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏。
6、elevation：纸墨设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当 SliverAppBar 和内容同级的时候，该值为 0， 当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值 flexibleSpace：一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用
7、backgroundColor：APP bar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用
8、 brightness：App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness
9、 iconTheme：App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme
10、 textTheme： App bar 上的文字样式。默认值为 ThemeData.primaryTextTheme
11、 centerTitle： 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样

基本组件

ClipRRect 给图片加圆角


 child: ClipRRect(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(4.0),
                        topRight: Radius.circular(4.0),
                      ),
                      child: Image.network(
                        'http://img3.3lian.com/2013/c4/95/d/18.jpg',
                        fit: BoxFit.cover,
                      ),
                    ),

没有子控件的容器尽可能大，除非传入的大小约束是无限的，在这种情况下，它们尽可能小。有子控件的容器将自己的尺寸给他们的孩子。我们可以通过width、height和 constraints属性控制size。

    const BoxDecoration({
    this.color,//背景色
    this.image,//图片
    this.border,//描边
    this.borderRadius,//圆角大小
    this.boxShadow,//阴影
    this.gradient,//过度效果
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,//形状,BoxShape.circle和borderRadius不能同时使用
    })

 body: new SizedBox(
        width: 250.0,
        height: 250.0,
        child: new Container(
          decoration: new BoxDecoration(
            backgroundColor: Colors.lightBlueAccent[100],
          ),
        ),
      ),
    );

 body: new AspectRatio(
        aspectRatio: 3.0 / 2.0,
        child: new Container(
          decoration: new BoxDecoration(
            backgroundColor: Colors.lightBlueAccent[100],
          ),
        ),
      ),
    );

new Row(
  children: <Widget>[
    new Expanded(
      child: new Text('Deliver features faster', textAlign: TextAlign.center),
    ),
    new Expanded(
      child: new Text('Craft beautiful UIs', textAlign: TextAlign.center),
    ),
    new Expanded(
      child: new FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: const FlutterLogo(),
      ),
    ),
  ],
)

Image里面的BoxFit参数介绍：（相当于Android的ImageView的scaleType参数）

fill 通过篡改原始宽高比来填充目标box
contain 在尽可能大的情况下，仍然将源完全包含在目标框中。
cover 尽可能小，同时仍然覆盖整个目标框。
fitWidth 确保显示源的全部宽度，而不管这是否意味着源垂直溢出目标框。
fitHeight 确保显示源的全部高度，而不管这是否意味着源水平地溢出目标框。
none 在目标框中对齐源（默认为居中），并放弃位于框外的源的任何部分。源图像未调整大小。
scaleDown 在目标框中对齐源(默认为居中)，如果需要，将源缩小以确保源适合该框。这与contain的内容相同，如果该内容会收缩图像，那么它就是none。

-MainAxisAlignment和CrossAxisAlignment简介
MainAxisAlignment（主轴）和CrossAxisAlignment（交叉轴）常用于Row和Column控件中，主要是用来控制子控件排列的位置，并可以配合textDirection和verticalDirection属性来控制子控件排列的方向及改变MainAxisAlignment和CrossAxisAlignment的起始位置。

enum MainAxisAlignment {
 //将子控件放在主轴的开始位置
  start,  
   //将子控件放在主轴的结束位置
  end,
  //将子控件放在主轴的中间位置
  center,
  //将主轴空白位置进行均分，排列子元素，手尾没有空隙
  spaceBetween,
  //将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件间距为中间子控件间距的一半
  spaceAround,
  //将主轴空白区域均分，使各个子控件间距相等
  spaceEvenly,
}

      new Text("hello_word",
            textDirection: TextDirection.ltr,
            style: TextStyle(
              decoration: TextDecoration.overline,
              fontSize: 40.0,
              fontWeight: FontWeight.bold,
              color: Colors.black87,
            ))

 new Icon(Icons.pool, size: 32.0, color: Colors.white),
上一篇下一篇

猜你喜欢

热点阅读