iT邦幫忙

2024 iThome 鐵人賽

DAY 7
0
生成式 AI

用AI寫程式也是要點本事的系列 第 7

開始用輸入框做點事情吧

  • 分享至 

  • xImage
  •  

做什麼事情呢?把輸入匡的內容設定到螢幕正中央顯示?那太沒挑戰性了。
這樣做吧!
「把介面上的元件都移除,只保留輸入匡,但將它移到畫面最下面。同時在介面上增加一個滿版列表,但不要遮蔽到輸入匡。在輸入匡旁邊設定一顆按鈕,要比標準大小寬三倍。」

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                itemCount: _listData.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_listData[index]),
                  );
                },
              ),
            ),

            Container(
              padding: EdgeInsets.all(32.0),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      color: Colors.grey[200],
                      child: TextField(
                        controller: textController,
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 72.0, // Three times the size of the icon
                    child: IconButton(
                      icon: Icon(Icons.add, color: Colors.black, size: 24.0),
                      onPressed: () {
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),

啊~它還很體貼的提醒我「別忘記增加一個矩陣/容器用來存放ListView的內容」。

final List<String> _listData = [];

OK。
開始進入白話文解說時間。

其實最明確最好懂的部分就是增加的輸入匡、按鈕、列表。
但列表的原理就不太好懂了。

在軟體設計中,列表歸類為前端介面設計會經常接觸到的元件/功能/議題,(如果你有興趣知道。)
它最初設計的概念是....想像一下眼前有五張撲克牌依序從「上到下」排列,每張牌上的花紋數字可以變動,我們將它標示為「A、B、C、D、E」。最一開始,五張撲克牌依序顯示了「1、2、3、4、5」,然後將A撲克牌從最上方移動到最下方,並且將顯示的資料改為6,然後繼續將B撲克牌從最上方移動到最下方,並且將顯示的資料改為7....這就是列表的原理。
可以用少少的五張撲克牌就完成一組可能長達數十甚至數百筆資料的展示。
每一筆資料(例如聯絡人清單中的「每一位聯絡人」)都需要一張撲克牌來顯示,滑動列表時,滑出畫面上的聯絡人就是「從最上方移動到最下方」,並且會將撲克牌的內容修改為其他聯絡人的資料

itemBuilder: (context, index) {
  return ListTile(
     title: Text(_listData[index]),
  );
},

上面這段就是執行這個將撲克牌的內容修改為其他聯絡人的資料的地方。
如果讓各位舉一反三自行思考一下,各位可能會發現以下資訊:
1.列表中沒有撲克牌,列表中有item。
2.ListTile就是撲克牌的牌面。
3.index就是「第幾位」聯絡人。
4._listData[index]就表示個別聯絡人。

為什麼會有這種設計?

電腦顯示畫面的過程稱為填圖Render,但它不是按照各位需要的資料去直接進行填圖,而是讀取類似設計圖的東西,簡稱View。
如果有五筆資料,就需要五個View,如果有一百筆資料,就需要一百個View....很遺憾這樣的邏輯行不通,因為萬一資料有上千筆呢?上千個View會讓記憶體崩潰的!(別忘了你資料本身也有千筆。)
所以就想出了這種用有限的View顯示超限量的資料的辦法。

難懂嗎?當然難,想出這招的人算是天才。

繼續。

「按下按鈕,將輸入匡的內容新增到列表內。」

為了不佔版面,省去其他內容,就只增加按鈕內修改的程式碼了!(反正copilot也是這樣幹,它只給我這幾行程式碼,然後要我自己找到位置複製貼上。)

SizedBox(
  width: 72.0, // Three times the size of the icon
  child: IconButton(
     icon: Icon(Icons.add, color: Colors.black, size: 24.0),
     onPressed: () {
        setState(() {
           _listData.add(textController.text);
           textController.clear();
        });
     },
   ),
),

哇喔~~這段程式碼看似簡單,但資訊量就有點超級多。
反正記得,textController幫助按鈕找到輸入匡、並取得裡面你輸入的資料,然後將資料新增到listData內....新增完把輸入匡內容清除。
為什麼這整段程式碼要包在一個setState()裡面?

哇喔~~要在不需要灌輸太多程式設計知識、只講模糊概念的情況下講完怎麼用人工AI寫程式,比我想像的要難太多了。
(三十天,有辦法寫完APP嗎?)


上一篇
Hello, Github mother-fxcking copilot.
下一篇
MVC、線程、權限、與布偶秀
系列文
用AI寫程式也是要點本事的30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言