Flutter Widget - Scaffold
  MKubsKtBzXL1 2023年11月02日 39 0


Flutter Widgets

Flutter 2.0.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 60bd88df91 (10 weeks ago) • 2021-03-03 09:13:17 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0

文章目录

  • ​​Flutter Widgets​​
  • ​​一、概览图​​
  • ​​二、Scaffold是什么?​​
  • ​​三、详细​​

​​1.材料设计根控件 MaterialApp​​2.页面基础布局 Scaffold

一、概览图

Flutter Widget - Scaffold_sed


Flutter Widget - Scaffold_sed_02


Flutter Widget - Scaffold_Text_03


Flutter Widget - Scaffold_flutter_04

二、Scaffold是什么?

​Scaffold​​​ 实现了基本的 ​​Material​​​ 布局。只要是在 ​​Material​​​ 中定义了的单个界面显示的布局控件元素,都可以使用 ​​Scaffold​​ 来绘制。

三、详细

import 'package:flutter/material.dart';

/// home 页
/// @author: dingwen
/// @date: 2021/5/9
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
//顶部标题
appBar: AppBar(
title: Text('Scaffold Widget'),
centerTitle: true,
bottom: PreferredSize(
preferredSize: Size.fromHeight(60.0),
child: Container(
width: double.infinity,
height: 60.0,
child: Center(child: Text('bottom')),
color: Colors.blue,
),
),
),

// 页面显示主体内容
body: Center(child: Text('Scaffold')),

// 左边侧边栏
drawer: Drawer(),

// 右边侧边栏
endDrawer: Drawer(),

// 按钮出现消失动画。可以自己实现
// floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
floatingActionButton: Builder(
builder: (c){
return FloatingActionButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return Stack(
children: <Widget>[
Container(
height: 30.0,
width: double.infinity,
color: Colors.black54,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25),
)),
),
Center(
child: Text(
"bottomSheet的内容",
),
),
],
);
});
},
child: Icon(Icons.ac_unit),
);
},
),

// 悬浮按钮位置
// centerDocked : 底部中间
// endDocked : 底部右侧
// centerFloat : 中间偏上
// endFloat : 底部偏上
// startTop : 左侧顶部
// endTop : 右侧顶部
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

// 底部持久化按钮
persistentFooterButtons: [
Icon(Icons.seven_k),
Icon(Icons.add),
Icon(Icons.bluetooth_searching)
],

//底部导航按钮
bottomNavigationBar: BottomNavigationBar(
currentIndex: 1,
fixedColor: Colors.deepOrangeAccent,
items: <BottomNavigationBarItem>[
// 至少是两个
BottomNavigationBarItem(
icon: Icon(Icons.person), tooltip: '我的', label: "我的"),
BottomNavigationBarItem(
icon: Icon(Icons.home), tooltip: '首页', label: '首页'),
],
),

// 顶部标题栏大小,默认true
primary: false,

//是否重新布局来避免底部被覆盖了,比如当键盘显示的时候,重新布局避免被键盘盖住内容。默认值为 true
resizeToAvoidBottomInset: true,

// 页面背景颜色
backgroundColor: Colors.grey[200],

bottomSheet: Container(
color: Colors.white,
width: double.infinity, // 占满屏幕宽度
height: 60.0,
child: Row(
children: <Widget>[
Expanded(child: TextField()),
RaisedButton(
onPressed: () {},
child: Text('发送'),
)
],
),
),
);
}


}


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  b1UHV4WKBb2S   2023年11月13日   34   0   0 裁剪ideflutter
  b1UHV4WKBb2S   2023年11月13日   27   0   0 flutterDart
MKubsKtBzXL1