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

Awbeci 發布于2019-05-23 17:29 / 719人閱讀

摘要：頁面銷毀時，銷毀控制器在中聲明省略省略在中使用省略省略擴展底部可以使用的屬性你的認可，是我堅持更新博客的動力，如果覺得有用，就請點個贊，謝謝

前言

在上一篇中，我們了解了常用的Widget，這一篇，我們從實際案例出發，來深入學習下Widget。

案例1 模擬登陸

先看效果圖

1.我們需要2個輸入框，1個按鈕這里用到的都是之前說過的Widget，就直接貼代碼了，建議先看這篇【Flutter】開發之基礎Widget（二）

class LoginDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("LoginDemo"),
      ),
      body: Container(
        margin: EdgeInsets.all(15),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.only(top: 100),
            ),
            TextField(
              decoration: InputDecoration(
                  hintText: "請輸入賬戶",
                  hintStyle: TextStyle(color: Colors.black45),
                  contentPadding: EdgeInsets.all(10),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(4),
                  )),
            ),
            Padding(
              padding: EdgeInsets.only(top: 15),
            ),
            TextField(
              //顯示*號
              obscureText: true,
              decoration: InputDecoration(
                  hintText: "請輸入密碼",
                  hintStyle: TextStyle(color: Colors.black45),
                  contentPadding: EdgeInsets.all(10),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(4),
                  )),
            ),
            Padding(
              padding: EdgeInsets.only(top: 50),
            ),
            FlatButton(
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(10)),
                child: Container(
                  height: 50,
                  width: 300,
                  decoration: BoxDecoration(color: Colors.deepOrangeAccent),
                  alignment: AlignmentDirectional.center,
                  child: Text(
                    "登錄",
                    style: TextStyle(
                      fontSize: 18,
                      color: Colors.white,
                      backgroundColor: Colors.deepOrangeAccent,
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

2.需要獲取輸入的內容

這里有2個方法

1）. 處理?onChanged回調

        TextField(
            //文字改變時調用
            onChanged: (String content) {
              print("content=" + content);
            }

2）. 提供一個TextEditingController

TextEditingController user = new TextEditingController();
        TextField(
         ...省略...
              controller: user ,
         ...省略...
          )

然后通過user.text方法即可取得輸入內容。

3.點擊事件

1）.可以通過onPressed實現

            FlatButton(
              onPressed: () {
                //顯示彈窗
                _showDialog(context);
              })

注：Flutter 的語法是 Dart，Dart 不像 Java ，沒有關鍵詞 public、private 等修飾符，_ 下橫線代表 private ，但是有 @protected 注解。 然后，我們需要判斷密碼是否大于6位，如不是，彈窗提示

  void _showDialog(BuildContext context) {
    if (pwd.text.length < 6) {
      showDialog(
        context: context,
        builder: (BuildContext content) {
          return AlertDialog(
            title: Text("提示"),
            content: Text("輸入的密碼不能小于6位"),
          );
        },
      );
    }
}

正常的邏輯來說，彈出窗中應該有按鈕，點擊重新輸入，但是卻發現，有的Widget沒有點擊事件，這時，我們可以通過在外面嵌套GestureDetector來處理，GestureDetector還有更多的功能，這個我們后面再說 2）.嵌套GestureDetector

  void _showDialog(BuildContext context) {
    if (pwd.text.length < 6) {
      showDialog(
        context: context,
        builder: (BuildContext content) {
          return AlertDialog(
            title: Text("提示"),
            content: Text("輸入的密碼不能小于6位"),
            actions: [
              GestureDetector(
                child: Container(
                  child: Text("重新輸入"),
                ),
                onTap: () {
                  pwd.clear();
                  //關閉彈窗
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );
    }
  }

案例2 Table 頁

先看效果圖

1.TabBar 上半部分使用的是AppBar+TabBar，詳細代碼如下：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("TableDemo"),
          bottom: TabBar(
            //可以滑動
            isScrollable: true,
            //邊距
            labelPadding: EdgeInsets.only(right: 0),
            //顏色
            labelColor: Colors.orangeAccent,
            //樣式 選中的
            labelStyle: TextStyle(fontSize: 18),
            //點擊事件
            onTap: (index) {
              
            },
            //未選中的顏色
            unselectedLabelColor: Colors.pink,
            //未選中樣式
            unselectedLabelStyle: TextStyle(fontSize: 14),
            //指示器的寬度
            indicatorSize: TabBarIndicatorSize.tab,
            //指示器顏色
            indicatorColor: Colors.amber,
            //指示器高度
            indicatorWeight: 2,

            tabs: [
              Container(
                width: 100,
                height: 40,
                child: Center(
                  child: Text("MODEL 1"),
                ),
              ),
              Container(
                width: 100,
                height: 40,
                child: Center(
                  child: Text("MODEL 2"),
                ),
              ),
              Container(
                width: 100,
                height: 40,
                child: Center(
                  child: Text("MODEL 3"),
                ),
              ),
            ],
          ),
        ),
  }

2.PageView

用法類似于ListView

PageView.builder

PageView.custom

PageView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Center(
              child: Text("PAGE ${index}"),
            ),
          );
        },
        itemCount: 5,
        onPageChanged: (indext) {},
      ),

方便起見，我們這里使用的是children

  Widget _pageView() {
    return PageView(
      children: [
        Container(
          color: Colors.blue,
          alignment: AlignmentDirectional.center,
          child: Text("PAGE 1"),
        ),
        Container(
          color: Colors.deepPurpleAccent,
          alignment: AlignmentDirectional.center,
          child: Text("PAGE 2"),
        ),
        Container(
          color: Colors.lightGreen,
          alignment: AlignmentDirectional.center,
          child: Text("PAGE 3"),
        ),
      ],
      onPageChanged: (index) {
   
      },
    );
  }

3.TabBar和PageView 聯動

PageView的控制使用的是PageController

1).初始化

PageController pageController = new PageController();

2).在PageView中聲明

PageView(
            ...省略...
      controller: pageController,
            ...省略...
)

3).在TabBar中使用

      TabBar(
            ...省略...
            //點擊事件
            onTap: (index) {
              pageController.jumpToPage(index);
            },
             ...省略...
      ）

TabBar的控制使用的是TabController

需要注意

我們的父級Widget必須是繼承StatefulWidget；需要實現SingleTickerProviderStateMixin

1).初始化

class TableDemo extends StatefulWidget {
  @override
  _TableDemoState createState() => _TableDemoState();
}

class _TableDemoState extends State<TableDemo>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();

    ///初始化時創建控制器
    ///通過 with SingleTickerProviderStateMixin 實現動畫效果。
    _tabController = new TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    ///頁面銷毀時，銷毀控制器
    _tabController.dispose();
    super.dispose();
  }
}

2).在TabBar中聲明

TabBar(
            ...省略...
      controller: _tabController,
            ...省略...
)

3).在PageView中使用

      PageView(
            ...省略...
      onPageChanged: (index) {
        _tabController.animateTo(index);
      },
             ...省略...
      ）

4.擴展底部Table 可以使用Scaffold的bottomNavigationBar屬性

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TableDemo"),
      ),
      body: _pageView(),
      bottomNavigationBar: Container(
        height: 40,
        child: Center(
          child: _tabView(),
        ),
      ),
    );
  }

你的認可，是我堅持更新博客的動力，如果覺得有用，就請點個贊，謝謝

云服務器 GPU云服務器 widget開發 Flutter開發環境 flutter開發webrtc Flutter開發環境搭建

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

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

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

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

Codeing_ls 2021-09-08 09:36 評論0 收藏0
Flutter是跨平臺開發終極之選嗎？Android開發該如何快速上手Flutter？

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

luckyyulin 2021-09-07 09:59 評論0 收藏0
【Flutter】開發之實戰Widget（四）

摘要：開發之目錄頁面跳轉的頁面跳轉，主要是通過來實現，類似原生中的路由，分為靜態和動態種方式。添加添加，這時，就可以這樣使用你的認可，是我堅持更新博客的動力，如果覺得有用，就請點個贊，謝謝前言這一篇，我們說說開發中會用到的地方。【Flutter】開發之目錄頁面跳轉 Flutter的頁面跳轉，主要是通過Navigator來實現，類似原生中的路由，分為靜態和動態2種方式。靜態首先...

funnyZhang 2019-05-23 13:54 評論0 收藏0
Flutter基礎（二）Flutter最新開發環境搭建和Hello World

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

tuomao 2019-05-23 17:30 評論0 收藏0