我是 Flutter 的新手。我对我的项目中的脚手架有疑问。
我有一个主屏幕,用于显示 BottomNavigation 小部件。我想我也使用 if 作为容器来显示所有其他页面/屏幕,以便底部导航保持可见。代码如下:
class Home_Screen extends StatefulWidget {
static const String id = 'home_screen';
@override
_Home_ScreenState createState() => _Home_ScreenState();
}
// ignore: camel_case_types
class _Home_ScreenState extends State<Home_Screen> {
PageController _pageController = PageController();
List<Widget> _screens = [
AgentDashboardScreen(),
TransactionDetailScreen(),
AgentProfileScreen(),
];
int _selectedIndex = 0;
void _onPageChanged(int index) {
setState(() {
_selectedIndex = index;
});
}
void _itemTapped(int selectedIndex) {
if (selectedIndex == 3) {
Navigator.of(context).pushAndRemoveUntil(
// the new route
MaterialPageRoute(
builder: (BuildContext context) => WelcomeScreen(),
),
(Route route) => false,
);
} else {
_pageController.jumpToPage(selectedIndex);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: _pageController,
children: _screens,
onPageChanged: _onPageChanged,
physics: NeverScrollableScrollPhysics(),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: _itemTapped,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _selectedIndex == 0 ? Colors.blueAccent : Colors.grey,
),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(
Icons.account_balance,
color: _selectedIndex == 1 ? Colors.blueAccent : Colors.grey,
),
label: 'Add Tran',
),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
color: _selectedIndex == 2 ? Colors.blueAccent : Colors.grey,
),
label: 'Profile',
),
BottomNavigationBarItem(
icon: Icon(
Icons.album_outlined,
color: _selectedIndex == 3 ? Colors.blueAccent : Colors.grey,
),
label: 'Logout',
),
],
),
);
}
}
在我可以从 BottomNavigator 导航到的屏幕之一中,我遇到了键盘上方大片空白的问题。我已经读到在另一个脚手架中放置一个脚手架会导致这种情况。
那么,当我导航到下一页时,我是否在另一个脚手架内有一个脚手架?这是第二页的片段。
class TransactionDetailScreen extends StatefulWidget {
static const String id = 'transaction_detail_screen';
final QueryDocumentSnapshot trxns;
//final Trxns trxns;
//final QuerySnapshot queryTrxns = trxns;
TransactionDetailScreen([this.trxns]);
@override
_TransactionDetailScreenState createState() =>
_TransactionDetailScreenState();
}
class _TransactionDetailScreenState extends State<TransactionDetailScreen> {
String _trxnStatus = 'Listed';
@override
Widget build(BuildContext context) {
// Get the stream of transactions created in main.dart
final trxnProvider = Provider.of<TrxnProvider>(context);
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/images/Appbar_logo.png',
fit: BoxFit.cover, height: 56),
],
),
),
backgroundColor: Colors.white,
body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Text(
'Transaction Details',
style: TextStyle(
fontSize: 30,
),
),
SizedBox(
height: 8.0,
),
TextField(
autofocus: true,
keyboardType: TextInputType.text,
controller: clientFNameController,
textAlign: TextAlign.center,
onChanged: (value) {
trxnProvider.changeclientFName(value);
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Client First Name',
labelText: 'Client First Name'),
),
RoundedButton(
title: 'Save',
colour: Colors.blueAccent,
onPressed: () async {
setState(() {
showSpinner = true;
});
try {
trxnProvider.saveTrxn();
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => AgentDashboardScreen(),
),
);
setState(() {
showSpinner = false;
});
} catch (e) {
// todo: add better error handling
print(e);
}
},
),
SizedBox(
height: 8.0,
),
(widget != null)
? RoundedButton(
title: 'Delete',
colour: Colors.red,
onPressed: () async {
setState(() {
showSpinner = true;
});
try {
trxnProvider.deleteTrxn(widget.trxns['trxnId)']);
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => AgentDashboardScreen(),
),
);
setState(() {
showSpinner = false;
});
} catch (e) {
// todo: add better error handling
print(e);
}
},
)
: Container(),
],
),
),
),
);
}
}