Flutter 布局 小试牛刀

本贴最后更新于 2120 天前,其中的信息可能已经渤澥桑田

第 01 节:垂直布局 Column 组件

Column 组件即垂直布局控件,能够将子组件垂直排列。其实你学会了 Row 组件就基本掌握了 Column 组件,里边的大部分属性都一样,我们还是以文字为例子,来看看 Column 布局。

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'ListView widget',
  home:Scaffold(
          appBar:new AppBar(
            title:new Text('垂直方向布局'),
  ),
  body:Column(
            mainAxisAlignment: MainAxisAlignment.center,
  children: [
              Center(child:Text('I am JSPang')),
  Center(child:Text('my website is jspang.com')),
  Center(child:Text('I love coding'))
            ],
  )
      ),
  );
  }
}

imagepng

第 02 节:水平布局 Row 的使用

Flutter 中的 row 控件就是水平控件,它可以让 Row 里边的子元素进行水平排列。

Row 控件可以分为灵活排列和非灵活排列两种,这两种模式都需要熟练掌握,等经验丰富后可根据需求进行使用。

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'ListView widget',
  home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向布局'),
  ),
  body:Row(
            children: [
              new RaisedButton(onPressed: (){},
  color: Colors.redAccent,
  child: new Text('red btn'),),
  Expanded(child: new RaisedButton(onPressed: (){},
  color: Colors.orange,
  child: new Text('orange btn'),),),
  Expanded(child: new RaisedButton(onPressed: (){},
  color: Colors.blue,
  child: new Text('blue btn'),),),

  ],
  )
      ),
  );
  }
}

imagepng

第 03 节:Stack 层叠布局

水平布局和垂直布局确实很好用,但是有一种情况是无法完成的,比如放入一个图片,图片上再写一些字或者放入容器,这时候 Row 和 Column 就力不从心了。Flutter 为这种情况准备了 Stack 层叠布局,这节就主要学习一下。

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){

    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.8),
  children: [
        new CircleAvatar(
          backgroundImage: new NetworkImage('http://cc.cocimg.com/api/uploads/181218/4eb05d4922763aba6edaa2c666fdc459.jpg'),
  radius: 100.0,
  ),
  new Container(
          decoration: new BoxDecoration(
            color: Colors.lightBlue,
  ),
  padding: EdgeInsets.all(5.0),
  child: Text('test flutter'),
  )
      ],
  );

  return MaterialApp(
      title:'ListView widget',
  home:Scaffold(
          appBar:new AppBar(
            title:new Text('层叠布局'),
  ),
  body:Center(
             child: stack
          )
      ),
  );
  }
}

Positioned 组件的属性

  • bottom: 距离层叠组件下边的距离
  • left:距离层叠组件左边的距离
  • top:距离层叠组件上边的距离
  • right:距离层叠组件右边的距离
  • width: 层叠定位组件的宽度
  • height: 层叠定位组件的高度
    imagepng

第 04 节:卡片组件布局

Flutter 还有一种比较比较酷炫的布局方式,我称 它为卡片式布局。这种布局类似 ViewList,但是列表会以物理卡片的形态进行展示。

// 卡片布局
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){

    var card = new Card(
      child: Column(
        children: [
          ListTile(
            title: Text('杭州市西湖区',style: TextStyle(fontWeight: FontWeight.w500),),
  subtitle: Text('刘强东:12132435486587'),
  leading: new Icon(Icons.account_box,color: Colors.lightBlue),
  ),
  new Divider(),
  ListTile(
            title: Text('广东省广州市',style: TextStyle(fontWeight: FontWeight.w500),),
  subtitle: Text('马化腾:12132435486587'),
  leading: new Icon(Icons.account_box,color: Colors.lightBlue),
  ),
  new Divider(),
  ListTile(
            title: Text('上海市新城区',style: TextStyle(fontWeight: FontWeight.w500),),
  subtitle: Text('码云:12132547'),
  leading: new Icon(Icons.account_box,color: Colors.lightBlue),
  ),
  new Divider(),
  ],
  ),
  );
  return MaterialApp(
      title:'ListView widget',
  home:Scaffold(
          appBar:new AppBar(
            title:new Text('卡片布局'),
  ),
  body:card
      ),
  );
  }
}

如图所示:
imagepng

DEMO 链接:https://github.com/hotdog45/flutter-practice.git

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1081 引用 • 3459 回帖 • 232 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 5 关注
  • 布局
    6 引用 • 3 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...