1.Container
1. Container設(shè)置圓角
Container(
width: widget.width,
height: widget.height,
decoration: BoxDecoration(
color: widget.backgroundColor,
border: Border.all(
color: widget.borderColor ?? widget.backgroundColor,
width: widget.borderWidth,
), borderRadius: BorderRadius.all(Radius.circular(4.0))
),
child: _getChild(),
),
ClipOval(
child:Image.network(url,width:100,height:100,fit:BoxFit.cover)
)
2. 給 Container 某一角設(shè)置圓角
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
),
),
),
2. CustomScrollView組件_Sliver組件
普通ListView無法嵌套ListView. 那么我們引入了CustomScrollView。
CustomScrollView是可以使用Sliver來自定義滾動模型（效果）的組件刘陶。它可以包含多種滾動模型胳赌，舉個例子，假設(shè)有一個頁面匙隔，頂部需要一個GridView疑苫，底部需要一個ListView，而要求整個頁面的滑動效果是統(tǒng)一的，即它們看起來是一個整體捍掺。如果使用GridView+ListView來實(shí)現(xiàn)的話撼短，就不能保證一致的滑動效果，因?yàn)樗鼈兊臐L動效果是分離的挺勿，所以這時就需要一個"膠水"阔加，把這些彼此獨(dú)立的可滾動組件"粘"起來，而CustomScrollView的功能就相當(dāng)于“膠水”满钟。
Sliver有細(xì)片、薄片之意胳喷，在Flutter中湃番，Sliver通常指可滾動組件子元素（就像一個個薄片一樣）。但是在CustomScrollView中吭露，需要粘起來的可滾動組件就是CustomScrollView的Sliver了吠撮，如果直接將ListView、GridView作為CustomScrollView是不行的讲竿，因?yàn)樗鼈儽旧硎强蓾L動組件而并不是Sliver泥兰！因此，為了能讓可滾動組件能和CustomScrollView配合使用题禀，F(xiàn)lutter提供了一些可滾動組件的Sliver版鞋诗，如SliverList、SliverGrid等迈嘹。實(shí)際上Sliver版的可滾動組件和非Sliver版的可滾動組件最大的區(qū)別就是前者不包含滾動模型（自身不能再滾動）削彬，而后者包含滾動模型 ，也正因如此秀仲，CustomScrollView才可以將多個Sliver"粘"在一起融痛，這些Sliver共用CustomScrollView的Scrollable，所以最終才實(shí)現(xiàn)了統(tǒng)一的滑動效果神僵。
| Sliver名稱 | 功能 | 對應(yīng)組件 | |
|---|---|---|---|
| SliverList | 列表 | ListView | |
| SliverFixedExtentList | 項目高度固定列表 | ListView 指定itemExtent | |
| SliverPrototypeExtentList | 根據(jù)原型生成高度固定的列表 | ListView 指定prototypeItem | |
| SliverAnimatedList | 添加/刪除列表項時執(zhí)行動畫 | AnimatedList | |
http://www.reibang.com/p/d833103ac4e7
3. column中嵌套GridView 報一下錯誤
完整報錯信息：
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
When a column is in a parent that does not provide a finite height constraint, for example if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the vertical direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.
解決辦法：
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
if (needGradeTag)
Padding(
padding: EdgeInsets.fromLTRB(15, 15, 0, 0),
child: Text(
"您的年級",
style: TextStyle(
color: Color(0xFF19191B),
fontSize: 17,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 15, 0, 0),
child: UnderlineText(
content: groupData.gradeTypeName,
textColor: Color(0xFF19191B),
textSize: 15,
),
),
GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, //橫軸三個子widget
childAspectRatio: screenWidth / 3.0 / 38.0,
mainAxisSpacing: 4, crossAxisSpacing: 4
),
itemBuilder: (context, index) {
List<GradeVos> GradeList = groupData.gradeVos;
GradeVos gradeVos = GradeList[index];
return Container(
color: Colors.red,
child: Text("哈哈"),
);
},
itemCount: groupData.gradeVos.length,
),
],
),
column中添加 mainAxisSize: MainAxisSize.min,
4. 頁面保存狀態(tài)方法
class _SchoolState extends State<School> with AutomaticKeepAliveClientMixin
然后重寫
@override
bool get wantKeepAlive => true;
5. 設(shè)置圖片
1.image fit字段設(shè)置
Image.network("https://img.com",fit:BoxFit.fill)
BoxFit.fill:充滿控件
BoxFit.cover:剪裁充滿空間
BoxFit.fitWidth:寬度填充
BoxFit.fitHeight:高度填充
2. 平鋪
repeat: ImageRepeat.repeatX x平鋪
repeat: ImageRepeat.repeatY y平鋪
repeat: ImageRepeat.repeat xy都平鋪
6. card
shep: RounedRectangleBorder(
borderRadius:borderRadius.circle(10);
)
7. CirclrAvatar
CircleAvatar(
)
8. 按鈕
9. Wrap
10. BottomNavgationBar
11. TabBar
12. flutter設(shè)置狀態(tài)欄顏色
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
///狀態(tài)欄顏色
class StatusBarDemoPage extends StatefulWidget {
const StatusBarDemoPage({super.key});
@override
_StatusBarDemoPageState createState() => _StatusBarDemoPageState();
}
class _StatusBarDemoPageState extends State<StatusBarDemoPage> {
bool customSystemUIOverlayStyle = false;
@override
Widget build(BuildContext context) {
var body = getBody();
///如果手動設(shè)置過狀態(tài)欄雁刷，就不可以用 AnnotatedRegion ，會影響
if (customSystemUIOverlayStyle) {
return body;
}
///如果沒有手動設(shè)置過狀態(tài)欄保礼，就可以用 AnnotatedRegion 直接嵌套顯示
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.dark,
child: body,
);
}
getBody() {
return Scaffold(
appBar: const ImageAppBar(),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
TextButton(
onPressed: () {
///手動修改
setState(() {
customSystemUIOverlayStyle = true;
});
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.light);
},
style: ButtonStyle(
backgroundColor: ButtonStyleButton.allOrNull<Color>(
Colors.yellowAccent,
),
),
child: const Text("Light"),
),
const SizedBox(
width: 10,
),
TextButton(
onPressed: () {
setState(() {
customSystemUIOverlayStyle = true;
});
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.dark);
},
style: ButtonStyle(
backgroundColor: ButtonStyleButton.allOrNull<Color>(
Colors.greenAccent,
),
),
child: const Text("Dart"),
),
],
),
),
);
}
}
///自定義 PreferredSizeWidget 做 AppBar
class ImageAppBar extends StatelessWidget implements PreferredSizeWidget {
const ImageAppBar({super.key});
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Image.asset(
"static/gsy_cat.png",
fit: BoxFit.cover,
width: MediaQuery.sizeOf(context).width,
height: kToolbarHeight * 3,
),
SafeArea(
child: IconButton(
color: Colors.white,
icon: const Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.of(context).pop();
}),
)
],
);
}
@override
Size get preferredSize => const Size.fromHeight(kToolbarHeight * 3);
}
13. MediaQuery.viewInsetsOf(context).bottom 是用來獲取當(dāng)前應(yīng)用的底部視圖的內(nèi)邊距
viewInsets ： 被系統(tǒng)用戶界面完全遮擋的部分大小沛励，簡單來說就是鍵盤高度
14. 返回到根目錄
Get.until((route) => route.settings.name == '/');
flutter 實(shí)現(xiàn)ios presnet效果
Get.to( widget, transition: Transition.downToUp);
15. 漸變色
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
width: 200.0,
height: 200.0,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.red,
Colors.blue,
],
),
),
),
),
),
);
}
}
16. NestedScrollView 的 headerSliverBuilder
headerSliverBuilder 中返回的數(shù)組中的widget只要是SliverToBoxAdapter包裹的就行
17. ListView去掉安全留白的方法
方法一:
ListView.builder(
padding: EdgeInsets.zero,
itemCount: 20,)
方法二：
MediaQuery.removePadding(context:context, removeTop: true,removeBottom: true, chail:)
18. 讓某個widget在安全區(qū)域內(nèi)
SafeArea(
child: Container(
height: 44,
color: Colors.blue,
))
19. 關(guān)于ExpansionTile
可通過shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0)),將展開邊沿的黑線去掉
