欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter(Scaffold全貌)

程序员文章站 2022-05-29 20:24:58
...

1.大体如此,如果有新学到的再进行补充:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo', theme: ThemeData(), home: study());
  }
}

class study extends StatefulWidget {
  @override
  _studyState createState() => _studyState();
}

class _studyState extends State<study> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("页面标题"),
      ),
      body:Container(
        color: Colors.orange,
      ),
      bottomSheet: Container(
        height: 80,
        width: double.infinity,
        color: Colors.red,
      ),
      persistentFooterButtons: <Widget>[
        FlatButton(
          color: Colors.pink,
          child: Text("按钮1",),
        ),
        Text("文本内容"),
      ],
      bottomNavigationBar:BottomNavigationBar(
        items: [
          BottomNavigationBarItem(title:Text("我的"),icon: Icon(Icons.person)),
          BottomNavigationBarItem(title:Text("我的"),icon: Icon(Icons.person)),

        ],
      ),
      drawer: Drawer(
        child: Container(
          child: Text(
            "抽屉菜单"
          ),
        ),
      ),//侧滑菜单
    );
  }
}

运行效果:
Flutter(Scaffold全貌)
2.appbar:
Flutter(Scaffold全貌)
3. bottomappbar:
Flutter(Scaffold全貌)

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Sample Code'),
    ),
    body: Center(
      child: Text('You have pressed the button'),
    ),
    bottomNavigationBar: BottomAppBar(
      shape: const CircularNotchedRectangle(),
      child: Container(height: 50.0,),
    ),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.add),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  );
}
相关标签: Flutter