国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【Flutter】開發之基礎Widget（二）

zhangyucha0 / 893人閱讀

摘要：是程序的主入口導包程序入口相當于主頁面可以看到，這個返回了一個的，作為程序的主界面。

什么是 Widget

Flutter 的核心設計思想便是一切即 Widget，在 Flutter 的世界里，包括views、view、 controllers、layouts等在內的概念都建立在 Widget 之上，可以理解成原生的View。

lib/main.dart 是程序的主入口

//導包
import "package:flutter/material.dart";
//程序入口
void main() => runApp(MyApp());
//相當于主頁面
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        primarySwatch: Colors.blue, 
      ),
      home: MyHomePage(title: "Home Page"),
    );
  }
}

可以看到，這個返回了一個MaterialApp的Widget，作為程序的主界面。

父級組件
Widget 介紹
StatelessWidget 無狀態widget，類似靜態頁面，不與用戶交互
StatefulWidget 有狀態widget，可以改變，可以與用戶交互
基礎組件
Widget 介紹
MaterialApp 一般用作APP頂層的主頁入口，可配置主題，多語言，路由等
Scaffold 一般用戶頁面的承載Widget，包含appbar、snackbar、drawer等material design的設定。
Appbar 一般用于Scaffold的appbar ，內有標題，二級頁面返回按鍵等，當然不止這些，tabbar等也會需要它
Text 顯示文本，類似于TextView
Image 顯示圖片，可以加載本地資源、file、網絡圖片、內存圖片
TextField 輸入框，類似于EditText

Text

          Text(
          //文本
          "我是Text我是Text我是Text我是Text我是Text我是Text我是Text我是Text我是Text我是Text",
          //超出屏幕 clip裁剪，fade漸隱，ellipsis省略號
          overflow: TextOverflow.ellipsis,
          //對齊方式
          textAlign: TextAlign.center,
          //文本方向
          textDirection: TextDirection.rtl,
          //樣式
          style: TextStyle(
            color: Colors.lightBlue,
            fontSize: 14,
            fontStyle: FontStyle.italic,
            backgroundColor: Colors.black87,
            //none無文字裝飾，lineThrough刪除線，overline文字上面顯示線，underline文字下面顯示線
            decoration: TextDecoration.lineThrough,
            //字母間隙
            letterSpacing: 10,
          ),
        )

Image

方法 作用
Image.asset、 Image(image: new AssetImage() 加載本地圖片
Image.file、 Image(image: new FileImage() file
Image.memory、 Image(image: new MemoryImage() 加載內存byte數組
Image.network、 Image(image: new NetworkImage() 加載網絡圖片

其中，asset首先需要在根目錄下建立images文件夾，然后在pubspec.yaml文件中添加引用才能使用

flutter:
  uses-material-design: true
  assets:
    - images/ic_launcher.png

              Image.asset(
                "images/ic_launcher.png",
                width: 100,
                height: 100,
                fit: BoxFit.fitHeight,
              ),

              Image(
                image: new NetworkImage(
                    "http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg"),
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              )

TextField

        TextField(
            //鍵盤輸入方式
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              //提示文字
              hintText: "請輸入手機號",
              //內容邊距
              contentPadding: EdgeInsets.all(10),
              //提示文字樣式
              hintStyle:
                  TextStyle(color: Colors.deepOrangeAccent, fontSize: 18),
              //邊框
              border: OutlineInputBorder(
                //圓角
                borderRadius: BorderRadius.all(Radius.circular(4)),
                borderSide: BorderSide(color: Colors.deepOrange),
              ),
            ),
            //文字改變時調用
            onChanged: (String content) {
              print("content=" + content);
            },
            //光標顏色
            cursorColor: Colors.deepOrangeAccent,
            //光標圓角
            cursorRadius: Radius.circular(4),
            //光標寬度
            cursorWidth: 2,
          )
布局型
Widget 多個子Widget 介紹
Container 否 默認充滿，包含了padding、margin、color、寬高、decoration 等配置
Padding 否 用于設置padding，對，你沒有猜錯，絕大部分Widget是沒有padding屬性的
Center 否 用于居中顯示
Column 是 垂直布局，類似于LinearLayout 的orientation="vertical"
Row 是 水平布局，類似于LinearLayout 的orientation="horizontal"
Stack 是 類似于relativeLayout 或者FrameLayout
ListView 是 類似于ListView或者RecyclerView

Container

Padding

Column

Row

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ContainerDemo"),
      ),
      body: Container(
        margin: EdgeInsets.all(10),
        padding: EdgeInsets.only(left: 10, right: 20),
//        color: Colors.orangeAccent,
        decoration: new BoxDecoration(
            //設置了decoration的color，就不能設置Container的color，否則會報錯
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(10)),
            border: new Border.all(width: 10, color: Colors.blue)),
        child: Column(
          //Column 垂直方向，Row 水平方向
          mainAxisAlignment: MainAxisAlignment.center,
          //max相當于match_parent，min相當于wrap_content
          mainAxisSize: MainAxisSize.max,
          verticalDirection: VerticalDirection.up,
          children: [
            Container(
              padding: EdgeInsets.all(10),
              margin: EdgeInsets.all(20),
              color: Colors.black54,
              child: Text(
                "1111111",
              ),
            ),
            Text(
              "111FFFFg",
              style: TextStyle(
                fontSize: 18,
                backgroundColor: Colors.black54,
              ),
            ),
            Text("222"),
            Text("333"),
          ],
        ),
      ),
    );
  }
}

Stack

Stack 類似于relativeLayout 或者FrameLayout，有2種定位方式

1.alignment 作用于是全部的子Widget

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        textDirection: TextDirection.ltr,
        //以整個組件的中心為坐標原點，x、y 偏移量取值范圍為 [-1,1]，
        // 如果 x 的偏移量大于 0，則表示向右偏移，小于 0 則向左偏移；
        // 如果 y 軸的偏移量大于 0 則向下偏移，小于 0 則向上偏移。
//        alignment: Alignment(0, 0),
        //AlignmentDirectional.topStart:垂直靠頂部水平靠左對齊
        //AlignmentDirectional.topCenter：垂直靠頂部水平居中對齊
        //AlignmentDirectional.topEnd：垂直靠頂部水平靠右對齊
        //AlignmentDirectional.centerStart：垂直居中水平靠左對齊
        //AlignmentDirectional.center：垂直和水平居中都對齊
        //AlignmentDirectional.centerEnd：垂直居中水平靠右對齊
        //AlignmentDirectional.bottomStart：垂直靠底部水平靠左對齊
        //AlignmentDirectional.bottomCenter：垂直靠底部水平居中對齊
        //AlignmentDirectional.bottomEnd：垂直靠底部水平靠右對齊
        alignment: AlignmentDirectional.centerEnd,
        children: [
          Container(
            color: Colors.black54,
            child: Text(
              "1111111",
            ),
          ),
          Text("111FFFFg",
              style: TextStyle(fontSize: 18, backgroundColor: Colors.black54)),
          Text("22222222")
        ],
      ),
    );
  }
}

2.Positioned 只能控制單個Widget，主要有left、right、top、bottom、width、height幾個屬性，分別表示距左、右、上、下的邊距，長度和寬度

注意：

1）left、right并存時，left生效；top、bottom并存時，top生效

2）left、right、width不能并存，top、bottom、height不能并存，會報錯

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        textDirection: TextDirection.ltr,
       children: [
          Container(
            color: Colors.black54,
            child: Text(
              "1111111",
            ),
          ),
          Positioned(
            top: 100,
            child: Text(
              "111FFFFg",
              style: TextStyle(
                fontSize: 18,
                backgroundColor: Colors.black54,
              ),
            ),
          ),
          Positioned(
            child: Text("22222222"),
            right: 10,
            top: 200,
          )
        ],
      ),
    );
  }
}

ListView

主要有3種構造方式 ListView.builder ListView.separated ListView.custom

1.ListView.builder

使用自帶的item --ListTile

class ListViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListViewDemo"),
        centerTitle: true,
      ),
      body: Container(
        color: Colors.white,
        child: ListView.builder(
          //item
          itemBuilder: (context, index) {
            return ListTile(
              //前置圖標
              leading: new Icon(Icons.list),
              title: new Text("標題"),
              subtitle: new Text("副標題"),
              //后置圖標
              trailing: new Icon(Icons.arrow_forward_ios),
              //內容邊距
              contentPadding: EdgeInsets.all(10),
            );
          },
          //數量
          itemCount: 10,
          //內容適配
          shrinkWrap: true,
          //內邊距
          padding: EdgeInsets.only(left: 10),
          //是否倒敘
          reverse: false,
          //item 高度 讓item加載更加高效
          itemExtent: 50,

          //滑動方式
          //AlwaysScrollableScrollPhysics() 總是可以滑動
          //NeverScrollableScrollPhysics禁止滾動
          //BouncingScrollPhysics 內容超過一屏 上拉有回彈效果
          //ClampingScrollPhysics 包裹內容 不會有回彈
          physics: BouncingScrollPhysics(),
          //預加載
          cacheExtent: 10,
        ),
      ),
    );
  }
}

2.ListView.separated

相當于原生中的多類型，核心是separatorBuilder，與itemBuilder是一同渲染的，可以用它來實現分割線

ListView.separated(
          itemBuilder: (context, index) {
            return ListTile(
              //前置圖標
              leading: new Icon(Icons.list),
              title: new Text("標題"),
              subtitle: new Text("副標題"),
              //后置圖標
              trailing: new Icon(Icons.arrow_forward_ios),
              //內容邊距
              contentPadding: EdgeInsets.all(10),
            );
          },
          separatorBuilder: (context, index) {
            return Divider(
              color: Colors.black45,
              height: 10,
              //左邊縮進
              indent: 50,
            );
          },
          itemCount: 20,
        )

3.ListView.custom

前2種方式是此方式的快捷方式，雖然不常用，但還是要了解下

        ListView.custom(
          childrenDelegate: SliverChildBuilderDelegate((context, index) {
            return ListTile(
              //前置圖標
              leading: new Icon(Icons.list),
              title: new Text("標題 custom"),
              subtitle: new Text("副標題 custom"),
              //后置圖標
              trailing: new Icon(Icons.arrow_forward_ios),
              //內容邊距
              contentPadding: EdgeInsets.all(10),
            );
          }),
        )

效果同方式1

示例

模擬器上間隔線顯示有問題，真機正常

ListViewDemo相關代碼

class ListViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListViewDemo"),
        centerTitle: true,
      ),
      body: Container(
        color: Colors.white,
        child: ListView.separated(
          itemBuilder: ((context, index) {
            return MoveItem();
          }),
          separatorBuilder: (context, index) {
            return Divider(
              color: Colors.black45,
              height: 10,
            );
          },
          itemCount: 10,
        ),
      ),
    );
  }
}

MoveItem相關代碼

class MoveItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(4),
      child: Row(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(4),
            child: Image.network(
              "http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg",
              width: 100,
              height: 150,
              fit: BoxFit.fill,
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: 15),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(
                "狄仁杰之四大天王",
                style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
              ),
              Text("豆瓣評分6.6"),
              Text("類型：動作、驚悚、冒險"),
              Text("導演：徐克"),
              Row(
                children: [
                  Text("主演："),
                  Padding(
                    padding: EdgeInsets.only(left: 10),
                  ),
                  Container(
                    width: 40,
                    height: 40,
                    child: CircleAvatar(
                      backgroundImage: NetworkImage(
                          "http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg"),
                    ),
                  ),
                  Container(
                    width: 40,
                    height: 40,
                    margin: EdgeInsets.only(left: 10),
                    child: CircleAvatar(
                      backgroundImage: NetworkImage(
                          "http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg"),
                    ),
                  ),
                  Container(
                    width: 40,
                    height: 40,
                    margin: EdgeInsets.only(left: 10),
                    child: CircleAvatar(
                      backgroundImage: NetworkImage(
                          "http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg"),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}
你的認可，是我堅持更新博客的動力，如果覺得有用，就請點個贊，謝謝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/6782.html

相關文章

  • Flutter是跨平臺開發終極之選嗎？Android開發該如何快速上手Flutter？

    摘要：月日，谷歌正式發布了的。到底能不能成為跨平臺開發終極之選是基于前端誕生的，但是對前端開發來說，的環境配置很麻煩，需要原生的平臺知識，還要擔心遇上網絡問題。現在已經不是曾經的小眾框架，這兩年里它已經逐步成長為主流的跨平臺開發框架之一。 ...

    luckyyulin 評論0 收藏0

  • 【Flutter】開發之進階Widget（三）

    摘要：頁面銷毀時，銷毀控制器在中聲明省略省略在中使用省略省略擴展底部可以使用的屬性你的認可，是我堅持更新博客的動力，如果覺得有用，就請點個贊，謝謝 前言 在上一篇中，我們了解了常用的Widget，這一篇，我們從實際案例出發，來深入學習下Widget。 案例1 模擬登陸 先看效果圖 showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ad87615c...

    Awbeci 評論0 收藏0

  • Flutter基礎（二）Flutter最新開發環境搭建和Hello World

    摘要：注釋處的方法是程序的入口，使用了符號，這是中單行函數或方法的簡寫，等價于如下代碼方法是框架的入口，如果不返回方法，那么執行的是一個控制臺應用。 本文首發于微信公眾號「劉望舒」 前言 最近的Google I/O大會上，Flutter1.5 開始支持移動、Web、桌面和嵌入式設備，從不溫不火的sky一直進化到如今熱門的Flutter，Flutter的發展已經超出很多人的想象。我對跨平臺技術一...

    tuomao 評論0 收藏0

  • 計劃在2021年進行響應式開發？但不確定應該選擇哪種技術來快速且低成本的開發應用程序？一文給你解決問

    摘要：與此同時，因新冠疫情的影響使得用戶對移動應用程序的需求激增。調查報告顯示年移動應用程序已經產生了億美元的收入，預計到年將產生億美元的收入。 引言 計劃在2021年進...

    Codeing_ls 評論0 收藏0

發表評論

0條評論

zhangyucha0

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<