Flutter学习(三)

Row水平布局

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: LayoutDemo(),
    ));

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget packedRow = Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Icon(Icons.star, color: Colors.green[500]),
        Icon(Icons.star, color: Colors.green[500]),
        Icon(Icons.star, color: Colors.green[500]),
        Icon(Icons.star, color: Colors.black),
        Icon(Icons.star, color: Colors.black),
      ],
    );
    return Scaffold(
      appBar: AppBar(
        title: Text("Row"),
      ),
      body: packedRow,
    );
  }
}

运行效果:
在这里插入图片描述

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: LayoutDemo(),
    ));

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
         title: Text("水平布局"),
       ),
      body: Row(
        children: <Widget>[
         const FlutterLogo(),
          const Text("您的预约订单已提交,如需修改或取消,请至我的-我的订单中操作"),
          Icon(Icons.sentiment_very_satisfied)
        ],
      ),
    );
  }
}

出现警告:
在这里插入图片描述
expanded:

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("水平布局"),
      ),
      body: Row(
        children: <Widget>[
          const FlutterLogo(),
          Expanded(child: Text("您的预约订单已提交,如需修改或取消,请至我的-我的订单中操作")),
          Icon(Icons.sentiment_very_satisfied)
        ],
      ),
    );
  }
}

自动换行效果:
在这里插入图片描述
column垂直布局

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: LayoutDemo(),
    ));

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("垂直布局"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text('We move under cover and we move as one'),
          Text('Through the night, we have one shot to live another day'),
          Text('We cannot let a stray gunshot give us away'),
          Text('We will fight up close, seize the moment and stay in it'),
          Text('It’s either that or meet the business end of a bayonet'),
          Text('The code word is ‘Rochambeau,’ dig me?'),
          Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),
        ],
      ),
    );
  }
}

运行效果:
在这里插入图片描述

  • 主轴mainAxisSize,次轴crossAxisAlignment,水平布局主轴为X轴,次轴为Y轴,垂直布局主轴为Y轴,次轴为X轴

Stack布局

  • 按顺序,前面的在底部后面的在上部
  • alignment: const FractionalOffset(0.5, 0.9),参数为X轴,Y轴偏移比例
void main() => runApp(MaterialApp(
      title: "Stack层叠布局示例",
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.9),
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new AssetImage("images/14.jpg"),
          radius: 100,
        ),
        new Container(
          decoration: new BoxDecoration(color: Colors.black38),
          child: new Text(
            "hello,Trump",
            style: new TextStyle(
                fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
          ),
        )
      ],
    );

    return Scaffold(
        appBar: AppBar(
          title: Text("Stack层叠布局示例"),
        ),
        body: new Center(
          child: stack
        ));
  }
}

运行效果:
在这里插入图片描述
层叠定位布局
绝对定位,偏移制定像素值

void main() => runApp(MaterialApp(
      title: "层叠定位布局示例",
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("层叠定位布局示例"),
        ),
        body: new Stack(
          children: <Widget>[
            new Image.network(
                "https://pics2.baidu.com/feed/a8ec8a13632762d0312450694888b5fe503dc6bc.png?token=9864e38c2ceab51b62727dc9d77e264a&s=7C96749E84E876AC7836DD6003002039"),
            new Positioned(
              left: 100,
                top: 200,
                child: new Text(
              "Hello,Trump",
              style: new TextStyle(
                  fontSize: 20, fontFamily: "Serif", color: Colors.black),
            ))
          ],
        ));
  }
}

运行效果:

在这里插入图片描述
card布局


void main() => runApp(MaterialApp(
      title: "Card布局示例",
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var card = new SizedBox(
      height: 250,
      child: new Card(
        child: new Column(
          children: <Widget>[
            new ListTile(
              title: new Text("北京市海淀区高梁桥斜街39号",style: new TextStyle(fontWeight: FontWeight.w300),),
              subtitle: new Text("交大知行大厦"),
              leading: new Icon(Icons.directions_car,color:Colors.lightBlue,),
            ),
            new Divider(),
            new ListTile(
              title: new Text("北京市海淀区高梁桥斜街39号",style: new TextStyle(fontWeight: FontWeight.w300),),
              subtitle: new Text("交大知行大厦"),
              leading: new Icon(Icons.directions_car,color:Colors.lightBlue,),
            ),
          ],
        ),
      ),
    );

    return Scaffold(
        appBar: AppBar(
          title: Text("Card布局示例"),
        ),
        body: new Center(
          child: card
        ));
  }
}

运行效果:
在这里插入图片描述滑动布局

void main() => runApp(MaterialApp(
      title: "滑动布局示例",
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("滑动布局示例"),
        ),
        body: new ListView(
          children: <Widget>[
            new Center(
              child: new Text(
                "九寨沟",
                style: new TextStyle(fontSize: 30),
              ),
            ),
            new Center(
              child: new Text(
                "五花海自然风景区",
                style: new TextStyle(fontSize: 16),
              ),
            ),
            new Center(
              child: new Text(
                '''
              九寨沟五花海 [1]  海拔2472米,水深5米,面积9万平方米,被誉为“九寨沟一绝”和“九寨精华”,在珍珠滩瀑布之上,熊猫湖的下部于日则沟孔雀河上游的尽头。五花海四周的山坡,入秋后便笼罩在一片绚丽的秋色中,色彩丰富,姿态万千。由于海底的钙华沉积和各种色泽艳丽的藻类,以及沉水植物的分布差异,使一湖之中形成了许多斑斓的色块,宝蓝、翠绿、橙黄、浅红,似无数块宝石镶嵌成的巨形佩饰,珠光宝气,雍容华贵。金秋时节,湖畔五彩缤纷的彩林倒映在湖面,与湖底的色彩混合成了一个异彩纷呈的彩色世界。其色彩十分丰富,甚至超出了画家的想象力。黄昏时分,火红的晚霞映入水中,湖水似金星飞溅,彩波粼粼,绮丽无比。从老虎嘴俯瞰它的全貌,俨然是一只羽毛丰满的开屏孔雀。长海流入五花海的水在经过石灰岩岩脉时,使水中带入了大量的石灰钙华物质。这些含有钙华物质的白色砂粒有很强的过滤作用,又像是热带珊瑚海中的沙子一样堆积着,连这里的藻类也因为受到了钙华物质的影响而变成白色。阳光一照,海子更为迷离恍惚,绚丽多姿,一片光怪陆离,使人进入了童话境地
              五花海是九寨沟诸景点中最精彩一个。四周的山坡,入秋后便笼罩在一片绚丽的秋色中,色彩丰富,姿态万千,独霸九寨。五花海的彩叶大半集中在出水口附近的湖畔,一株株彩叶交织成锦,如火焰流金。含碳酸钙质的池水,与含不同叶绿素的水生群落,在阳光作用下,幻化出缤纷色彩,一团团、一块块,有湛蓝、有墨绿、有翠黄。岸上林丛,赤橙黄绿倒映池中,一片色彩斑斓,与水下沉木、植物相互点染,其美尤妙,故得名五花海。九寨人说:五花海是神池,它的水洒向哪儿,哪儿就花繁林茂,美丽富饶。
            五花海的底部景观妙不可言,湖水一边是翠绿色的,一边是湖绿色的,湖底的枯树由于钙化,变成一丛丛灿烂的珊瑚,在阳光的照射下,五光十色,非常迷人。
              九寨沟五花海 [1]  海拔2472米,水深5米,面积9万平方米,被誉为“九寨沟一绝”和“九寨精华”,在珍珠滩瀑布之上,熊猫湖的下部于日则沟孔雀河上游的尽头。五花海四周的山坡,入秋后便笼罩在一片绚丽的秋色中,色彩丰富,姿态万千。由于海底的钙华沉积和各种色泽艳丽的藻类,以及沉水植物的分布差异,使一湖之中形成了许多斑斓的色块,宝蓝、翠绿、橙黄、浅红,似无数块宝石镶嵌成的巨形佩饰,珠光宝气,雍容华贵。金秋时节,湖畔五彩缤纷的彩林倒映在湖面,与湖底的色彩混合成了一个异彩纷呈的彩色世界。其色彩十分丰富,甚至超出了画家的想象力。黄昏时分,火红的晚霞映入水中,湖水似金星飞溅,彩波粼粼,绮丽无比。从老虎嘴俯瞰它的全貌,俨然是一只羽毛丰满的开屏孔雀。长海流入五花海的水在经过石灰岩岩脉时,使水中带入了大量的石灰钙华物质。这些含有钙华物质的白色砂粒有很强的过滤作用,又像是热带珊瑚海中的沙子一样堆积着,连这里的藻类也因为受到了钙华物质的影响而变成白色。阳光一照,海子更为迷离恍惚,绚丽多姿,一片光怪陆离,使人进入了童话境地
              五花海是九寨沟诸景点中最精彩一个。四周的山坡,入秋后便笼罩在一片绚丽的秋色中,色彩丰富,姿态万千,独霸九寨。五花海的彩叶大半集中在出水口附近的湖畔,一株株彩叶交织成锦,如火焰流金。含碳酸钙质的池水,与含不同叶绿素的水生群落,在阳光作用下,幻化出缤纷色彩,一团团、一块块,有湛蓝、有墨绿、有翠黄。岸上林丛,赤橙黄绿倒映池中,一片色彩斑斓,与水下沉木、植物相互点染,其美尤妙,故得名五花海。九寨人说:五花海是神池,它的水洒向哪儿,哪儿就花繁林茂,美丽富饶。
            五花海的底部景观妙不可言,湖水一边是翠绿色的,一边是湖绿色的,湖底的枯树由于钙化,变成一丛丛灿烂的珊瑚,在阳光的照射下,五光十色,非常迷人。
               ''',
                style: new TextStyle(fontSize: 14),
              ),
            ),
          ],
        ));
  }
}

运行效果:
在这里插入图片描述
appBar

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: DidiSample(),
    ));

class DidiSample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _DidiSampleState();
}

class _DidiSampleState extends State<DidiSample> {
  Choice _selectedChoice = choices[0];

  void _select(Choice choice) {
   setState(() {
     _selectedChoice = choice;
   });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: const Text("appbar"),
        actions: <Widget>[
          IconButton(
              icon: Icon(choices[0].icon),
              onPressed: () {
                _select(choices[0]);
              }),
          IconButton(
              icon: Icon(choices[1].icon),
              onPressed: () {
                _select(choices[1]);
              }),
          PopupMenuButton<Choice>(
              onSelected: _select,
              itemBuilder: (BuildContext context) {
                return choices
                    .skip(2)
                    .map<PopupMenuItem<Choice>>((Choice choice) {
                  return PopupMenuItem(
                      value: choice, child: Text(choice.title));
                }).toList();
              }),
        ],
      ),
      body: Padding(
          padding: const EdgeInsets.all(16),
          child: ChoiceDidi(choice: _selectedChoice)),
    )
    );
  }
}

class ChoiceDidi extends StatelessWidget {
  final Choice choice;

  const ChoiceDidi({Key key, this.choice}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Icon(
                choice.icon,
                size: 128,
                color: textStyle.color,
              ),
              Text(
                choice.title,
                style: textStyle,
              )
            ],
          ),
        ));
  }
}

class Choice {
  final String title;
  final IconData icon;

  const Choice({this.title, this.icon});
}

const List<Choice> choices = <Choice>[
  Choice(title: '自驾', icon: Icons.directions_car),
  Choice(title: '自行车', icon: Icons.directions_bike),
  Choice(title: '乘船', icon: Icons.directions_boat),
  Choice(title: '公交车', icon: Icons.directions_bus),
  Choice(title: '火车', icon: Icons.directions_transit),
  Choice(title: '步行', icon: Icons.directions_walk),
];

运行效果:
在这里插入图片描述

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: _DidiSampleState(),
    ));

class _DidiSampleState extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: DefaultTabController(
            length: choices.length,
            child: Scaffold(
              appBar: AppBar(
                title: const Text('滴滴出行'),
                bottom: TabBar(
                    tabs: choices.map((Choice choice) {
                  return Tab(
                    text: choice.title,
                    icon: Icon(choice.icon),
                  );
                }).toList()),
              ),
              body: TabBarView(
                  children: choices.map((Choice choice) {
                return Padding(
                  padding: const EdgeInsets.all(16),
                  child: ChoiceDidi(
                    choice: choice,
                  ),
                );
              }).toList()),
            )
        )
    );
  }
}

class ChoiceDidi extends StatelessWidget {
  final Choice choice;

  const ChoiceDidi({Key key, this.choice}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Icon(
                choice.icon,
                size: 128,
                color: textStyle.color,
              ),
              Text(
                choice.title,
                style: textStyle,
              )
            ],
          ),
        ));
  }
}

class Choice {
  final String title;
  final IconData icon;

  const Choice({this.title, this.icon});
}

const List<Choice> choices = <Choice>[
  Choice(title: '自驾', icon: Icons.directions_car),
  Choice(title: '自行车', icon: Icons.directions_bike),
  Choice(title: '乘船', icon: Icons.directions_boat),
  Choice(title: '公交车', icon: Icons.directions_bus),
  Choice(title: '火车', icon: Icons.directions_transit),
  Choice(title: '步行', icon: Icons.directions_walk),
];

运行效果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值