Flutter-UI-基礎控制元件-有解無憂

一直覺得自己寫的不是技術，而是情懷，一個個的教程是自己這一路走來的痕跡，靠專業技能的成功是最具可復制性的，希望我的這條路能讓你們少走彎路，希望我能幫你們抹去知識的蒙塵，希望我能幫你們理清知識的脈絡，希望未來技術之巔上有你們也有我，

小知識

1.int _currentIndex = 0; 創建帶有下劃線屬性是一個私有屬性

Center

作用:用于中心對齊文字
屬性
child

Center(
  child: ,
)

Text

child: Text(
    'fenghanxuqwertyuiopasdfgjkgh',
    overflow: TextOverflow.clip,//ellipsis 超出一行3個點   fade 超出一行漸變  clip 超出一行裁剪
    maxLines: 3,//設定Label的行數
    textScaleFactor: 2,//字體放大兩倍
    textAlign: TextAlign.center,//對齊方式
    textDirection: TextDirection.ltr,
    style: TextStyle(//設定文字樣式
        decoration: TextDecoration.lineThrough,//中間有一個行橫線
        decorationColor: Colors.white,//中間有一個行橫線 顏色
        decorationStyle: TextDecorationStyle.dashed,//中間有一個行橫線 虛線
        letterSpacing: 0.0,//字體之間的左右間距
        fontStyle: FontStyle.italic,//字體傾斜
        fontWeight: FontWeight.w900,//字體粗細(加粗)
        backgroundColor: Colors.red,//設定背景顏色
        fontSize: 20.0,//設定文字大小
        color: Color.fromRGBO(234, 123, 155, 1.0),//設定文字顏色
//          color: Colors.yellow,//設定文字顏色
   ),
),

MaterialApp

是一個跟組件作為App的跟組件相當于每個頁面都要加的加了之后頁面默認是白色的，不然是黑色的

屬性
home - 主頁
title - 標題
color - 顏色
theme - 主題
routes - 路由

固定頁面結構
return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('Flutter Demol'),
    ),
    body: HomeContent(),
  ),
  theme: ThemeData(
    primarySwatch: Colors.yellow,//修改主題顏色   想導航欄的顏色
  ),
);

Scaffold

屬性
appBar - 顯示假面頂部的一個AppBar
body - 當前界面所顯示的主要內容
drawer - 抽屜選單控制元件

Container

容器組件
屬性
child
height
width
decoration 設定背景顏色和邊框顏色

child: Container(
  child: Text('fenghanxuqwertyuiopasdfgjkgh'),
  height: 300,
  width: 300,
  decoration: BoxDecoration(
     color: Colors.blue,//容易背景顏色
     border: Border.all(
              color: Colors.green,//邊框顏色
              width: 2//邊框寬度
     ),
     borderRadius: BorderRadius.all(Radius.circular(10.0),),//設定容器圓角
  ),
//padding: EdgeInsets.all(20),//容器之間的內邊距
  padding: EdgeInsets.fromLTRB(20, 20, 20, 20),//容器之間的內邊距
//margin: EdgeInsets.all(20), //容器之間的外距離
  margin:  EdgeInsets.fromLTRB(20, 20, 20, 20),//容器之間的外距離
//transform: Matrix4.translationValues(10, 10, 10),//容器位移
//transform: Matrix4.rotationZ(0.3),//旋轉 Matrix4.rotationX(0.3), Matrix4.rotationY(0.3),
//transform: Matrix4.diagonal3Values(0.5, 0.5, 0.5),//縮放倍數
  alignment: Alignment.bottomRight,//內容相對容器的對齊方式
),

Image

網路圖片加載不成功兩個問題：
1.是否連接wifi
2.重新燒錄需要點擊是否同意訪問網路
3.url是否有效
加載網路圖片

child: Image.network(
  'https://www.itying.com/images/upload/Image/3333333.png',
  alignment: Alignment.bottomRight,//圖片相對容器的對齊方式
  color: Colors.yellow,//圖片背景顏色
  colorBlendMode: BlendMode.colorBurn,//圖片混合模式
  fit: BoxFit.cover,//顯示效果 cover  自適應 fill  鋪滿可能變形 fitWidth 寬充滿 filHright 高充滿 repeat 多張圖片平鋪
),

圖片切圓方法
加載網路圖片

child: Container(
  child: ClipOval(
    child: Image.asset('https://www.itying.com/images/flutter/2.png',
    width: 100,
    height: 100,
    fit: BoxFit.cover,),
  ),
),

匯入本地圖片
在這里插入圖片描述

child: Container(
  child: ClipOval(
    child: Image.asset('images/NahuoLogo1024.png',
    width: 100,
    height: 100,
    fit: BoxFit.cover,),
  ),
),

ListView 串列

在這里插入圖片描述

最簡單的串列

    return ListView(
//      scrollDirection: Axis.horizontal,//設定水平串列
      padding: EdgeInsets.all(10),//設定上下左右間距20
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.home,color: Colors.blue,size: 40,),//加載系統圖示
          title: Text(
            'fenghanxu',
            style: TextStyle(
              fontSize: 20,
            ),
          ),
          subtitle: Text('subtitleFenghanxu'),
          trailing: Icon(Icons.search,color: Colors.blue,size: 40,),
        ),
        ListTile(
          leading: Image.network('https://www.itying.com/images/flutter/1.png'),//加載網路圖片
          title: Text('fenghanxu'),
          subtitle: Text('subtitleFenghanxu'),
        ),
      ],
    );

通過for回圈實作動態遍歷ListItem串列
在這里插入圖片描述

class _MyHomePageState extends State<MyHomePage> {

  List<Widget> _getData(){
    List<Widget> list = new List();
    for(var i = 0; i < 20; i++){
      list.add(ListTile(
        title: Text('i am is $i list'),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ListView(
//      scrollDirection: Axis.horizontal,//設定水平串列
          padding: EdgeInsets.all(10),//設定上下左右間距20
          children: _getData(),
        ),
      ),
    );
  }
}

GridView 網格

GridView.count 靜態網格布局

//GridView  for回圈資料
import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Demol'),),
        body: HomeContent(),
      ),
    );
  }

}


class HomeContent extends StatelessWidget {

  List<Widget> _getListData(){
    var tempList = listData.map((value){
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value['imageUrl']),
            SizedBox(
              height: 20,//圖片跟文字的間距是20
            ),
            Text(
              value['title'],
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 15
              ),
            )
          ],
        ),
        decoration: BoxDecoration(//添加邊框
            border: Border.all(
                color: Color.fromRGBO(233, 233, 233, 0.9),
                width: 1.0
            )
        ),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      crossAxisSpacing: 20.0,//設定cell的左右間距為20
      mainAxisSpacing: 20.0,//設定cell的上下間距為20
      padding: EdgeInsets.all(10),//設定cell的內間距為10(上下左右)
      crossAxisCount: 2,//控制列數
      childAspectRatio: 0.9,//只能調節X Y軸的比例  寬高比0.7
      children: this._getListData(),
    );

  }

}

GridView.builder 動態網格布局

//GridView  資料   GridView.count 靜態網格布局
import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Demol'),),
        body: HomeContent(),
      ),
    );
  }

}


class HomeContent extends StatelessWidget {

  Widget _getListData(context,index){
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]['imageUrl']),
          SizedBox(
            height: 20,//圖片跟文字的間距是20
          ),
          Text(
            listData[index]['title'],
            textAlign: TextAlign.center,
            style: TextStyle(
                fontSize: 20
            ),
          )
        ],
      ),
      decoration: BoxDecoration(//添加邊框
          border: Border.all(
              color: Color.fromRGBO(233, 233, 233, 0.9),
              width: 1.0
          )
      ),
    );
//    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 10.0,//設定cell的左右間距為20
        mainAxisSpacing: 10.0,//設定cell的上下間距為20
        crossAxisCount: 2,
      ),
      itemCount: listData.length,//便利的次數是陣列的次數
      itemBuilder: this._getListData,//資料方法
    );

  }

}

BoxDecoration 邊框

BoxDecoration(
     color: Colors.blue,//容易背景顏色
     border: Border.all(
              color: Colors.green,//邊框顏色
              width: 2//邊框寬度
     ),
     borderRadius: BorderRadius.all(Radius.circular(10.0),),//設定容器圓角
  )

SizedBox 間隙

SizedBox( height: 20,)//圖片跟文字的間距是20

Padding 外邊框控制元件

return Padding(
  padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
  child: Image.network(
      'https://www.itying.com/images/flutter/1.png', fit: BoxFit.cover),
);

Row 水平布局控制元件

return Row(
  //center start end  spaceAround 兩邊留固定空隙  spaceBetween 中間留空隙 spaceEvenly  兩邊留平均空隙
  mainAxisAlignment: MainAxisAlignment.start,//X軸的顯示方式
  //crossAxisAlignment: CrossAxisAlignment.end,//Y軸的顯示方式 要用一個參考物用的比較小
  children: <Widget>[
    IconContainer(Icons.search,color: Colors.blue,size: 30,),
    IconContainer(Icons.home,color: Colors.yellow,size: 30,),
    IconContainer(Icons.settings,color: Colors.green,size: 30,),
  ],
);

Column 垂直布局控制元件

return Container(
  width: 200,
  height: 400,
  color: Colors.pink,
  child: Column(
    //center start end  spaceAround 兩邊留固定空隙  spaceBetween 中間留空隙 spaceEvenly  兩邊留平均空隙
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,//X軸的顯示方式
    //crossAxisAlignment: CrossAxisAlignment.end,//Y軸的顯示方式 要用一個參考物用的比較小
    children: <Widget>[
      IconContainer(Icons.search,color: Colors.blue,size: 30,),
      IconContainer(Icons.home,color: Colors.yellow,size: 30,),
      IconContainer(Icons.settings,color: Colors.orange,size: 30,),
    ],
  ),
);

Expanded 控制元件相對父View的寬度比例

return Container(
  width: 400,
  height: 100,
  color: Colors.pink,
  child: Row(
    //center start end  spaceAround 兩邊留固定空隙  spaceBetween 中間留空隙 spaceEvenly  兩邊留平均空隙
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,//X軸的顯示方式
    //crossAxisAlignment: CrossAxisAlignment.end,//Y軸的顯示方式 要用一個參考物用的比較小
    children: <Widget>[
      Expanded(
        flex: 1,
        child: IconContainer(Icons.search,color: Colors.blue,size: 30,),
      ),
      Expanded(
        flex: 2,
        child: IconContainer(Icons.home,color: Colors.yellow,size: 30,),
      ),
    ],
  ),
);

Stack

Stack配合Align 使用 Stack 它可以控制子組件的位置

return  Center(
  child: Container(
    height: 400.0,
    width: 300.0,
    color: Colors.red,
    child: Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Align(
          alignment: Alignment.topLeft,
          child: Icon(Icons.home,size: 40,color: Colors.white),
        ),
        Align(
          alignment: Alignment.center,
          child: Icon(Icons.search,size: 40,color: Colors.white),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Icon(Icons.select_all,size: 40,color: Colors.white),
        ),
        Align(
          alignment: Alignment(1.0,-0.2),
          child: Icon(Icons.security,size: 40,color: Colors.white),
        ),
      ],
    ),
  ),
);

Stack配合Positioned 使用 Stack 它可以控制子組件的位置

return  Center(
  child: Container(
    height: 400.0,
    width: 300.0,
    color: Colors.red,
    child: Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Positioned(
          left: 10,
          child: Icon(Icons.home,size: 40,color: Colors.white),
        ),
        Positioned(
          bottom: 0,
          left: 100,
          child: Icon(Icons.search,size: 40,color: Colors.white),
        ),
        Positioned(
          right: 10,
          top: 10,
          child: Icon(Icons.select_all,size: 40,color: Colors.white),
        ),
        Positioned(
          bottom: 10,
          left: 10,
          child: Icon(Icons.security,size: 40,color: Colors.white),
        ),
      ],
    ),
  ),
);

AspectRatio 用于設定子控制元件是父控制元件的螢屏比例

AspectRatio的作用是調整child到設定的寬高比

return AspectRatio(
  aspectRatio: 2.0/1.0,
  child: Container(
    color: Colors.red,
  ),
);

Card 卡片組件底部帶陰影組件

return Card(
  margin: EdgeInsets.all(10),
  child: Column(
    children: <Widget>[
      ListTile(
        title: Text('張三',style: TextStyle(fontSize: 28)),
        subtitle: Text('高級工程師'),
      ),
      ListTile(
        title: Text('電話：15989954385'),
      ),
      ListTile(
        title: Text('地址： 逢簡馮家大街'),
      )
    ],
  ),
);

RaisedButton 突出按鍵

return RaisedButton(
  child: Text(this.text),
  textColor: Theme.of(context).accentColor,
  onPressed: (){

  },
);

Wrap 相當于不等寬按鍵布局

    return Wrap(
      spacing: 20,//設定每個小容器之前的左右間距為20
      runSpacing: 10,//設定每個小容器之前的上下間距為10
//      alignment: WrapAlignment.spaceEvenly,//整個View的對齊方式  用的比較小
      runAlignment: WrapAlignment.end,
      direction: Axis.horizontal,//vertical  horizontal
      children: <Widget>[
        MyButton('第一季'),
        MyButton('第一季1'),
        MyButton('第一季12'),
        MyButton('第一季123'),
        MyButton('第一季1234'),
        MyButton('第一季4'),
        MyButton('第一季3'),
      ],
    );

StatefulWidget

狀態組件因為它有一個setState方法
如果想改變頁面中的資料就用StatefulWidget

class HomeContent extends StatefulWidget {

  HomeContent({Key key}) : super(key: key);
  //建構式   固定寫法
  _HomeContentState createState() => _HomeContentState();

}

class _HomeContentState extends State<HomeContent> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }

}

StatelessWidget

無狀態組件不能改變控制元件里面的值

class HomeContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }
}

BarNavigationView 底部導航欄

import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Tabs(),
    );
  }
}


//StatefulWidget
class Tabs extends StatefulWidget {

  Tabs({Key key}) : super(key: key);

  _TabsState createState() => _TabsState();

}

class _TabsState extends State<Tabs> {

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Demol'),),
      body: HomePage(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap: (int index){
          setState(() {
            this._currentIndex = index;
          });
        },
        iconSize:36.0,//icon大小
        fixedColor:Color.red,//icon顏色
        type:BottomNavigationBarType.fixed,//設定tabbar可以有多個按鈕
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首頁'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text('分類'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('設定'),
          ),
        ],
      ),
    );
  }

}

class HomePage extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text('fenghanxu'),
    );
  }

}

缺小：tabbar底部導航欄切換控制器Demol 30視頻，

route 路由

基本路由不帶引數

return Container(
  child: Center(
    child: RaisedButton(
      child: Text('按鍵-搜索'),
      color: Theme.of(context).accentColor,
      textTheme: ButtonTextTheme.primary,
      onPressed: (){
       //路由
        Navigator.of(context).push(
            MaterialPageRoute(
                builder: (context)=>searchPage()
            )
        );
      },),
  ),
);

基本路由帶引數

return Container(
  child: Center(
    child: RaisedButton(
      child: Text('按鍵-搜索'),
      color: Theme.of(context).accentColor,
      textTheme: ButtonTextTheme.primary,
      onPressed: (){
      //路由
        Navigator.of(context).push(
            MaterialPageRoute(
                builder: (context)=>searchPage(title: 'sendToTitle',)
            )
        );
      },),
  ),
);

回傳pop

Navigator.of(content).pop();

命名路由

搜索控制器代碼
在這里插入圖片描述

路由代碼
在這里插入圖片描述
跳轉不帶引數

跳轉帶引數
在這里插入圖片描述
路由替換
路由替換用下一個控制器替換當前控制器不斷替換回來根目錄就是跳轉之后回傳的時候上一個控制器被銷毀了

Navigator.of(context).pushReplacementNamed('/login');

普通路由跳轉回根目錄

Navigator.of(context).pushAndRemoveUntil(
  new MaterialPageRoute(builder: (context) => new Tabs(index: 0,)),
    (route) => route == null
);

自定義AppBar 導航欄

在這里插入圖片描述

return Scaffold(
  appBar: AppBar(
    title: Text('Hello Flutter'),
    backgroundColor: Colors.red,
    centerTitle: true,//標題居中顯示
    leading: IconButton(
        icon: Icon(Icons.menu),
        onPressed: (){
          print('點擊左邊按鍵');
    }),
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.search),
          onPressed: (){
            print('點擊右邊按鍵1');
          }),
      IconButton(
          icon: Icon(Icons.settings),
          onPressed: (){
            print('點擊右邊按鍵2');
          }),
    ],
  ),
  body: Center(
    child: Container(
      child: Text('hello flutter'),
    ),
  ),
);

普通控制器頂部TabBar切換

在這里插入圖片描述

class _categoryPageState extends State<categoryPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Row(
              children: <Widget>[
                Expanded(
                    child: TabBar(
                        indicatorColor: Colors.white,//選中Label顏色
                        labelColor: Colors.white,//選中文字顏色
                        unselectedLabelColor: Colors.white,//未選中文字顏色
                        indicatorSize: TabBarIndicatorSize.label,//指示器長度
                        isScrollable: true,//如果多個按鈕的話可以滑動
                        tabs: <Widget>[
                           Tab(text: '軍事'),
                           Tab(text: '經濟'),
                    ]))
              ],
            ),
            centerTitle: true, //標題居中顯示
          ),
          body: TabBarView(children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('第一行'),
                ),
                ListTile(
                  title: Text('第二行'),
                ),
                ListTile(
                  title: Text('第三行'),
                ),
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('第一行'),
                ),
                ListTile(
                  title: Text('第二行'),
                ),
                ListTile(
                  title: Text('第三行'),
                ),
              ],
            )
          ]),
        ));
  }
}

Tabbar常用屬性
在這里插入圖片描述
視頻35(看3分之一) 有一個更好的tabbar切換方式沒有寫原始碼

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/293384.html

標籤：其他

上一篇：Calling a method in the system process without a qualified user

下一篇：Android免權限懸浮窗組件 - FloatingX

Flutter-UI-基礎控制元件

小知識

Center

Text

MaterialApp

Scaffold

Container

Image

ListView 串列

GridView 網格

BoxDecoration 邊框

SizedBox 間隙

Padding 外邊框控制元件

Row 水平布局控制元件

Column 垂直布局控制元件

Expanded 控制元件相對父View的寬度比例

Stack

AspectRatio 用于設定子控制元件是父控制元件的螢屏比例

Card 卡片組件 底部帶陰影組件

RaisedButton 突出按鍵

Wrap 相當于不等寬按鍵布局

StatefulWidget

StatelessWidget

BarNavigationView 底部導航欄

route 路由

自定義AppBar 導航欄

普通控制器頂部TabBar切換

Card 卡片組件底部帶陰影組件