Flutter AppBar示例二

最新推荐文章于 2024-12-03 13:31:50 发布

ACGuan

最新推荐文章于 2024-12-03 13:31:50 发布

阅读量219

点赞数

分类专栏： Flutter

本文链接：https://blog.youkuaiyun.com/csdnlinyongsheng/article/details/91358994

版权

Flutter 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Flutter中的AppBar组件，展示了具体使用示例，通过代码详细解释了如何自定义AppBar的各种功能，包括设置标题、导航图标、操作按钮等，帮助开发者更好地理解和应用AppBar。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import 'package:flutter/material.dart';


class DidiSample extends StatelessWidget{
  Choice _selectedChoice = choices[0];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: DefaultTabController(
        length: choices.length,
        child: new Scaffold(
          appBar: new AppBar(
            title: Text("滴滴出行"),
            bottom: new TabBar(
              tabs: choices.map((Choice choice){
                return new Tab(
                  text: choice.title,
                  icon: new Icon(choice.icon),
                );
              }).toList(),
            ),
          ),
          body: TabBarView(children: choices.map((Choice choice){
              return Padding(
                padding: EdgeInsets.all(10),
                child: ChoiceDidi(choice: choice,),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}
class Choice{
  final String title;
  final IconData icon;
  const Choice({this.title, this.icon});
}
const List<Choice> choices = <Choice>[
  Choice(title: '自驾', icon:Icons.directions_car),
  Choice(title: '乘般', icon:Icons.directions_boat),
  Choice(title: '自行车',icon: Icons.directions_bike),
  Choice(title: '飞机', icon:Icons.directions_bus),
  Choice(title: '火车', icon:Icons.directions_railway)

];
class ChoiceDidi extends StatelessWidget{
  const ChoiceDidi({Key key, this.choice}):super(key:key);
  final Choice choice;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Icon(choice.icon, size: 128.0, color: textStyle.color,),
              Text(choice.title, style: textStyle,)
            ],
          ),
        ),


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

----------------------------------------------------------
//调整高度
Scaffold( 
        appBar: PreferredSize(
        child: AppBar(
        ),
        preferredSize: Size.fromHeight(screenSize.height * 0.07))
);

效果如下：