flutter - Flutter:抽屉内将 ListTile 项目移至底部
问题描述
在文本帐户和注销所在的第二个容器内,我希望它位于抽屉的底部。我添加了小部件对齐和对齐:bottomCenter,但这不起作用。我也尝试过使用 FractionalOffset 但这也不起作用。
我在这里犯了什么错误,容器没有移到底部?
代码
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mealapp/models/global.dart';
import 'package:mealapp/screens/meal_plan/meal_plan.dart';
import 'package:mealapp/screens/shopping_plan/shopping.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:mealapp/bloc/auth/auth_bloc.dart';
import 'package:mealapp/bloc/auth/auth_event.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarBrightness: Brightness.light,
statusBarIconBrightness: Brightness.dark,
));
final authBloc = context.bloc<AuthBloc>();
return DefaultTabController(
length: 2,
child: Scaffold(
key: _scaffoldKey,
drawer: Theme(
data: Theme.of(context).copyWith(canvasColor: darkGreyColor),
child: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Center(
child: Text(
'Settings',
style: darkTodoTitle,
),
),
),
ListTile(
leading:
Icon(Icons.create, color: Colors.white, size: 25),
onTap: () {},
title: Text(
'Create New List',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
Container(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Container(
height: 1.8,
color: Colors.white54,
),
),
),
],
),
ListTile(
leading: Icon(Icons.account_box,
color: Colors.white, size: 25),
onTap: () {},
title: Text(
'Here the Lists you got access or created',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
],
),
),
Container(
child: Align(alignment: Alignment.bottomCenter,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Container(
height: 1.8,
color: Colors.white54,
),
),
),
],
),
ListTile(
leading: Icon(Icons.account_box,
color: Colors.white, size: 25),
onTap: () {},
title: Text(
'Account',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
ListTile(
leading:
Icon(Icons.person, color: Colors.white, size: 25),
onTap: () => authBloc.add(LogoutUser()),
title: Text(
'Logout',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
],
),
),
),
],
),
),
),
appBar: AppBar(
brightness: Brightness.light,
elevation: 0,
leading: Builder(
builder: (context) => IconButton(
onPressed: () => _scaffoldKey.currentState.openDrawer(),
icon: Icon(
Icons.menu,
color: Colors.blue,
)),
),
title: TabBar(
tabs: [
Tab(
icon: Icon(Icons.fastfood),
),
Tab(
icon: Icon(Icons.local_grocery_store),
),
],
labelColor: darkGreyColor,
unselectedLabelColor: Colors.blue,
indicatorSize: TabBarIndicatorSize.label,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Colors.transparent,
),
backgroundColor: Colors.white,
),
body: TabBarView(
children: [
MealPage(),
ShoppingPage(),
],
),
backgroundColor: Colors.white,
),
);
}
}
解决方案
您需要将 Widget 包装ListTile
在Align
Widget 中并提供alignment: FractionalOffset.bottomCenter
. 正如您在错过包装在Widget 中的问题中提到的那样,此Align
Widget 应该用Widget 包装。请尝试以下操作,这将对您有所帮助。Expanded
Align
Expanded
Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: ListTile(
leading: Icon(Icons.account_box,
color: Colors.white, size: 25),
onTap: () {},
title: Text(
'Account',
style: TextStyle(
color: Colors.white, fontSize: 20
),
),
),
),
),
推荐阅读
- javascript - React Native Render Modal onMessage Firebase 通知
- r - Highcharts组合图与R中的动画
- bash - 尝试在 while-read 内解析并打印两个不同的值
- vba - 检查值,只有列出的值必须出现在 VBA 列中
- html - 如何使侧面的菜单正确显示
- r - 为什么在绘制“ggplot2”图时“考试”会打印图形图例?
- mongodb - 在 MongoDB Kafka 源连接器中配置管道
- google-cloud-platform - GCP UI 中的错误预算是否应该超过 100%?
- visual-studio - Visual C++构建的.exe需要vcruntime140_1.dll才能执行,这个要求可以去掉吗?
- sapui5 - 如何使用自定义文件名将数据从 UI5 导出到 Excel