我正在嘗試使用顫振制作雜貨應用程式 UI。如何在此代碼中添加水平滾動條？建議在不影響其他代碼的情況下執行此操作的正確方法？影像的右側顯示了我到目前為止的實作。有人可以向我建議一種方法嗎？另外我如何在搜索框前面添加左綠色框？
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffEDEFF4),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home,color: Colors.green ),
label: 'Home',
backgroundColor: Colors.white,
),
BottomNavigationBarItem(
icon: Icon(Icons.person,color: Colors.grey),
label: 'Profile',
// backgroundColor:Colors.blue,
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart,color: Colors.grey),
label: 'cart',
// backgroundColor:Colors.blue,
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications ,color: Colors.grey),
label: 'bell',
// backgroundColor:Colors.blue,
),
BottomNavigationBarItem(
icon: Icon( Icons.more_horiz, color: Colors.grey),
label: 'bell',
// backgroundColor:Colors.blue,
),
]),
body: Padding(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
child: ListView(
children: [
buildSearchInput(),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffFFFCEE),
),
height: 180,
width: 380,
child: Column(
children: const [
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 180, 10),
child: Text(
"FRUIT AND BERRIES",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 10,
color: Colors.lightGreen,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 180, 10),
child: Text(
"Tangerine",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 220, 10),
child: Text(
"Rs.0.90/kg",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 12,
color: Colors.grey,
fontWeight: FontWeight.w700),
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(120, 0, 40, 0),
child: Image(
image: AssetImage("assets/images/banana.png"),
),
),
],
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffFFFCEE),
),
height: 180,
width: 380,
child: Column(
children: const [
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 180, 10),
child: Text(
"FRUIT AND BERRIES",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 10,
color: Colors.lightGreen,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 180, 10),
child: Text(
"Tangerine",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 220, 10),
child: Text(
"Rs.0.90/kg",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 10,
color: Colors.grey,
fontWeight: FontWeight.w700),
),
),
],
)
)),
const Padding(
padding: EdgeInsets.fromLTRB(120, 0, 40, 0),
child: Image(
image: AssetImage("assets/images/orange.png"),
),
),
],
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffE2F3DF),
),
height: 180,
width: 380,
child: Column(
children: const [
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 180, 10),
child: Text(
"FRUIT AND BERRIES",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 10,
color: Colors.lightGreen,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 180, 10),
child: Text(
"Tangerine",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 220, 10),
child: Text(
"Rs.0.90/kg",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 10,
color: Colors.grey,
fontWeight: FontWeight.w700),
),
),
],
)
)),
const Padding(
padding: EdgeInsets.fromLTRB(100, 0, 40, 0),
child: Image(
image: AssetImage("assets/images/kiwi.png"),
// height:200,
),
),
],
),
],
),
),
);
}
Widget buildSearchInput() => Container(
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(14)),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Row(
children: [
Icon(
Icons.search,
size: 30,
color: Colors.grey.shade300,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
);
}
uj5u.com熱心網友回復：
您可以添加ListView，scrollDirection: Axis.horizontal在這種情況下，它將需要具有固定高度，并且它將根據父ListView滾動事件向上滾動。
buildSearchInput(),
SizedBox(
height: kToolbarHeight,
child: ListView(
scrollDirection: Axis.horizontal,
children: List.generate(14, (index) => Text("item $index")),
),
),
如果您希望將其放在頂部固定位置，請使用Column和ListView包裹所有內容Expanded。
body: Padding(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
child: Column(
children: [
buildSearchInput(),
SizedBox(
height: kToolbarHeight,
child: ListView(
scrollDirection: Axis.horizontal,
children: List.generate(14, (index) => Text("item $index")),
),
),
Expanded(
child: ListView(
children: [
Stack(....
前往flutter.dev獲取資訊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/420299.html
標籤：
下一篇：了解未來，在Flutter中等待