Wigets学习之BottomSheet

Flutter提供了两个方法来唤起BottomSheet：showBottomSheet、showModalBottomSheet

showBottomSheet

从底部弹出一个弹出层

• context：上下文(必填)
• builder：弹出层内容生成函数(必填)
• backgroundColor：背景色
• elevation：阴影
• shape：裁剪

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomSheet学习',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BottomSheet学习"),
      ),
      body: Container(
        child: BottomSheetButton(),
      ),
    );
  }
}

class BottomSheetButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: () {
        showBottomSheet(
            context: context,
            backgroundColor: Colors.blue.shade50,
            elevation: 12,
            builder: (BuildContext context) {
              return Container(
                height: 600,
                child: GridView.count(
                  crossAxisCount: 4,
                  mainAxisSpacing: 12,
                  crossAxisSpacing: 12,
                  children: List.generate(
                      8,
                      (index) => Container(
                            child: Icon(Icons.ac_unit),
                            color: Colors.blue,
                          )),
                ),
              );
            });
      },
      child: Text("打开BottomSheet"),
    );
  }
}

注意：showBottomSheet实际调用Scaffold.of(context).showBottomSheet，如果在同一层级中拿不到Scaffold会报No Scaffold widget found,所以在使用时可以封装一下

showModalBottomSheet

从底部弹出一个带有遮罩的弹出层

• context：上下文(必填)
• builder：弹出层内容生成函数
• backgroundColor：背景色
• elevation：阴影
• barrierColor：遮罩颜色
• isScrollControlled：是否可滚动
• shape：裁剪

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomSheet学习',
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BottomSheet学习"),
      ),
      body: OutlinedButton(
        child: Text("打开BottomSheet"),
        onPressed: () {
          showModalBottomSheet(
              context: context,
              backgroundColor: Colors.blue.shade50,
              elevation: 12,
              builder: (BuildContext context) {
                return GridView.count(
                  crossAxisCount: 4,
                  mainAxisSpacing: 12,
                  crossAxisSpacing: 12,
                  children: List.generate(
                      8,
                      (index) => Container(
                            child: Icon(Icons.ac_unit),
                            color: Colors.blue,
                          )),
                );
              });
        },
      ),
    );
  }
}

顶部圆角 BottomSheet

• 通过share属性来实现
• 通过backgroundColor设置为Colors.transparent(透明)，然后设置弹出层内容的圆角来实现

share实现

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomSheet学习',
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BottomSheet学习"),
      ),
      body: OutlinedButton(
        child: Text("打开BottomSheet"),
        onPressed: () {
          showModalBottomSheet(
              context: context,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(12),
                      topRight: Radius.circular(12))),
              builder: (BuildContext context) {
                return Padding(
                  padding: EdgeInsets.all(12),
                  child: GridView.count(
                    crossAxisCount: 4,
                    mainAxisSpacing: 12,
                    crossAxisSpacing: 12,
                    children: List.generate(
                        8,
                        (index) => Container(
                              child: Icon(Icons.ac_unit),
                              color: Colors.blue,
                            )),
                  ),
                );
              });
        },
      ),
    );
  }
}

backgroundColor+子部件实现

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomSheet学习',
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BottomSheet学习"),
      ),
      body: OutlinedButton(
        child: Text("打开BottomSheet"),
        onPressed: () {
          showModalBottomSheet(
              context: context,
              backgroundColor: Colors.transparent,
              builder: (BuildContext context) {
                return Container(
                  padding: EdgeInsets.all(12),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(12),
                          topRight: Radius.circular(12))),
                  child: GridView.count(
                    crossAxisCount: 4,
                    mainAxisSpacing: 12,
                    crossAxisSpacing: 12,
                    children: List.generate(
                        8,
                        (index) => Container(
                              child: Icon(Icons.ac_unit),
                              color: Colors.blue,
                            )),
                  ),
                );
              });
        },
      ),
    );
  }
}