摘要:控件練習地址一。單選框中的單選框,和一樣本身沒有狀態,必須父親有狀態才能改變值屬性此的值當選擇此的時候的回調。
flutter控件練習demo地址:github
一。Radio (單選框)1.1 屬性flutter 中的單選框 , 和 Checkbox 一樣 本身沒有狀態,必須父親有狀態 才能改變值
value: 此 Radio 的 value 值
onChanged: 當選擇此 radio 的時候 的回調。 參數就是 此 value 的值
groupValue: 如果 Radio 的 value 和 groupValue 一樣 就 是此 Radio 選中 其他 設置為 不選中
activeColor: 選中的顏色
二、RadioListTile(dan) 2.1 屬性value: 此 Radio 的 value 值
onChanged: 當選擇此 radio 的時候 的回調。 參數就是 此 value 的值
groupValue: 如果 Radio 的 value 和 groupValue 一樣 就 是此 Radio 選中 其他 設置為 不選中
activeColor: 選中的顏色
title: 標題, 具有代表性的就是 Text
subtitle: 副標題(在 title 下面), 具有代表性的就是 Text
isThreeLine = false:// 是否是三行文本
true : 副標題 不能為 null
false:如果沒有副標題 ,就只有一行, 如果有副標題 ,就只有兩行
dense: 是否密集垂直
secondary: 左邊的一個控件
selected = false: text 和 icon 的 color 是否 是 activeColor 的顏色
controlAffinity = ListTileControlAffinity.platform:
ListTileControlAffinity.platform 根據不同的平臺,來顯示 對話框 的位置
ListTileControlAffinity.trailing:勾選在右,title 在中,secondary 在左
ListTileControlAffinity.leading :勾選在左,title 在中,secondary 在右
1.2 demo圖片 1.3 代碼注意點 RadioListTile 的父控件 不能選擇Row (暫時不知道為什么),demo中選的是 Column
import "package:flutter/material.dart";
class RadioDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Radio 和 Radio RadioListTile "),
centerTitle: true,
),
body: RadioStateDemo(),
);
}
}
class RadioStateDemo extends StatefulWidget {
@override
State createState() {
// TODO: implement createState
return RadioSDemo();
}
}
class RadioSDemo extends State {
String groupValue;
String valueLiu;
String valueZhang;
String valueGuo;
String valueLi;
@override
void initState() {
super.initState();
groupValue = "劉德華";
valueLiu = "劉德華";
valueZhang = "張學友";
valueGuo = "郭富城";
valueLi = "黎明";
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 20,
),
Text(
"一:Radio",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Radio(
// 此 Radio 的 value 值
value: valueLiu,
// 當選擇此 radio 的時候 的回調。 參數就是 此 value 的值
onChanged: (value) {
setState(() {
groupValue = value;
});
},
// 如果 Radio 的 value 和 groupValue 一樣 就 是此 Radio 選中 其他 設置為 不選中
groupValue: groupValue,
// 選中的顏色
activeColor: Colors.red,
// 響應手勢的大小 , 默認是 48 * 48
// MaterialTapTargetSize.shrinkWrap 水波紋 在中間
// MaterialTapTargetSize.padded 水波紋 靠左上
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
Radio(
value: valueZhang,
onChanged: (value) {
setState(() {
groupValue = value;
});
},
groupValue: groupValue,
activeColor: Colors.red,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
Radio(
value: valueGuo,
onChanged: (value) {
setState(() {
groupValue = value;
});
},
groupValue: groupValue,
activeColor: Colors.red,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
Radio(
value: valueLi,
onChanged: (value) {
setState(() {
groupValue = value;
});
},
groupValue: groupValue,
activeColor: Colors.red,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
],
),
SizedBox(
height: 40,
),
Text(
"二:RadioListTile",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
// 不知道 為什么 Row 父布局 不行(暫時不知道why)
Column(
// mainAxisAlignment: MainAxisAlignment.center,
children: [
RadioListTile(
title: Text(valueLiu),
// 必須要的屬性
value: valueLiu,
//是否選中發生變化時的回調, 回調的 bool 值 就是是否選中 , true 是 選中
groupValue: groupValue,
onChanged: _changed,
// 選中時 填充的顏色
activeColor: Colors.red,
// 標題, 具有代表性的就是 Text ,
// selected 如果是 true :
// 如果 不設置 text 的 color 的話, text的顏色 跟隨 activeColor
// 副標題(在 title 下面), 具有代表性的就是 Text , 如果 不設置 text 的 color 的話, text的顏色 跟隨 activeColor
subtitle: Text("副標題"),
// 是否是三行文本
// 如果是 true : 副標題 不能為 null
// 如果是 false:
// 如果沒有副標題 ,就只有一行, 如果有副標題 ,就只有兩行
isThreeLine: false,
// 是否密集垂直
dense: false,
// 左邊的一個控件
// secondary: Text("secondary"),
// text 和 icon 的 color 是否 是 activeColor 的顏色
selected: true,
controlAffinity: ListTileControlAffinity.leading,
),
RadioListTile(
title: Text(valueZhang),
value: valueZhang,
groupValue: groupValue,
onChanged: _changed),
RadioListTile(
title: Text(valueGuo),
value: valueGuo,
groupValue: groupValue,
onChanged: _changed),
RadioListTile(
title: Text(valueLi),
value: valueLi,
groupValue: groupValue,
onChanged: _changed),
],
)
],
);
}
void _changed(value) {
groupValue = value;
setState(() {});
}
}
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/7352.html
摘要:是啥是谷歌推出的一套視覺設計語言。比如有的可以換皮膚,而每一套皮膚就是一種設計語言,有古典風呀炫酷風呀極簡風呀神馬的,而就是谷歌風,有興趣的同學可以學習了解一下官方原版和中文翻譯版,這是每一個產品經理的必修教材。 flutter環境和運行環境搭建好之后,可以開始擼碼了,然而當你打開VScode,在打開項目文件夾后,擺在你面前的是main.dart被打開的樣子,里面七七八八的已經寫好了一...
摘要:布局控件不會直接呈現內容,可看作承載可視控件的容器。布局控件也是可以模擬顯示的,通常用于調試布局樣式時用到的網格線標尺動畫幀等。但是當頁面內容需要超出屏幕尺寸時,就用和代替。 不知不覺已經到了第7篇,然而很多萌新玩家可能還是不知道如何堆砌控件,像用CSS一樣搭出漂亮的APP界面,我也一樣,紅紅火火恍恍惚惚,直到今天含淚讀完Flutter布局基礎,仿佛打開了一個全新的世界。 基本概念 在...
摘要:前言最近比較熱門,但是成體系的文章并不多,前期避免不了踩坑我這篇文章主要介紹如何使用實現一個比較復雜的手勢交互,順便分享一下我在使用過程中遇到的一些小坑,減少大家入坑作者鏈接先睹為快本項目支持運行,效果如下對了,順便分享一下生成的小竅門,建 前言 Flutter最近比較熱門,但是Flutter成體系的文章并不多,前期避免不了踩坑;我這篇文章主要介紹如何使用Flutter實現一個比較復雜...
摘要:前言最近比較熱門,但是成體系的文章并不多,前期避免不了踩坑我這篇文章主要介紹如何使用實現一個比較復雜的手勢交互,順便分享一下我在使用過程中遇到的一些小坑,減少大家入坑作者鏈接先睹為快本項目支持運行,效果如下對了,順便分享一下生成的小竅門,建 前言 Flutter最近比較熱門,但是Flutter成體系的文章并不多,前期避免不了踩坑;我這篇文章主要介紹如何使用Flutter實現一個比較復雜...
摘要:當發送按鈕觸發事件后調用函數,在中執行了方法,此時根據中的變量變更重新渲染對象,然后大家就可以看到消息記錄框中底部新增了一行消息。 熟悉了flutter的各種控件和相互嵌套的代碼結構后,可以再加深一點難度:加入動畫特效。 雖然flutter的內置Metarial控件已經封裝好了符合其設計語言的動畫特效,使開發者節約了不少視覺處理上的精力,比如點擊或長按listTile控件時自帶水波紋動...
閱讀 1751·2021-09-27 14:02
閱讀 3100·2021-09-27 13:36
閱讀 1046·2019-08-30 12:46
閱讀 1834·2019-08-30 10:51
閱讀 3571·2019-08-29 17:02
閱讀 941·2019-08-29 16:38
閱讀 1846·2019-08-29 16:37
閱讀 3004·2019-08-26 10:32