flutter text 左对齐_Flutter 常用布局详解(更新...)

Flutter 项目中常用的布局详情,及封装和使用,快速开发项目.

以及手势事件和滚动事件的使用

Scaffold 导航栏的实现,有些路由页可能会有抽屉菜单(Drawer)以及底部Tab导航菜单等

const Scaffold({
    
    Key key,
    this.appBar,//标题栏
    this.body,//内容
    this.floatingActionButton,//悬浮按钮
    this.persistentFooterButtons,//底部持久化现实按钮
    this.drawer,//侧滑菜单左
    this.endDrawer,//侧滑菜单右
    this.bottomNavigationBar,//底部导航
    this.backgroundColor,//背景颜色
    this.resizeToAvoidBottomPadding: true,//自动适应底部padding
    this.primary: true,//使用primary主色
  })

Flutter 中自带的material样式的标题栏,首先看一下AppBar具有哪些属性,代码如下:

AppBar({
    
    Key key,
    this.leading,//主导Widget
    this.automaticallyImplyLeading: true,
    this.title,//标题
    this.actions,//其他附加功能
    this.flexibleSpace,//伸缩空间，显示在title上面
    this.bottom,//显示在title下面
    this.elevation: 4.0,//阴影高度
    this.backgroundColor,//背景颜色
    this.brightness,//明暗模式
    this.iconTheme,//icon主题
    this.textTheme,//text主题
    this.primary: true,//是否是用primary
    this.centerTitle,//标题是否居中
    this.titleSpacing: NavigationToolbar.kMiddleSpacing,//title与leading的间隔
    this.toolbarOpacity: 1.0,//title级文字透明度
    this.bottomOpacity: 1.0,//底部文字透明度
  })

悬浮button 属性详解

const FloatingActionButton({
    
    Key key,
    this.child,//button的显示样式
    this.tooltip,//提示，长按按钮提示文字
    this.backgroundColor,//背景颜色
    this.heroTag: const _DefaultHeroTag(),//页面切换动画Tag
    this.elevation: 6.0,//阴影
    this.highlightElevation: 12.0,//高亮阴影
    @required this.onPressed,//点击事件
    this.mini: false//是否使用小图标
  })

底部导航栏BottomNavigationBar的实现,与经常搭配的PageView实现项目中常用的tab切换

Scaffold(
      body: PageView(
        controller: _controller,
        children: <Widget>[//page的页面
          HomePage(),
          SearchPage(),
          TravelPage(),
          MinePage(),
        ],
        onPageChanged: (int index) {
    //滑动page的监听
          setState(() {
    //改变tab状态
            _controllerIndex = index;
          });
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _controllerIndex, //当前的index
          onTap: (index) {
    //点击tab
            _controller.jumpToPage(index); //跳转到具体的页面
            //注意改变_controllerIndex的状态
            setState(() {
    
              _controllerIndex = index;
            });
          },
          type: BottomN