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),
];

運行效果：