我正在設計一個雜貨店應用程式。我想在搜索欄前面并行添加一個小的綠色框??容器。（如圖所示）這是我的代碼。在代碼中，我在代碼末尾的單獨小部件中添加了一個搜索欄。有人可以建議我這樣做嗎？到我在代碼中添加此框的位置。
主頁.dart
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: ListView(
children: [
buildSearchInput(), // search box
Padding(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
child: Column(
children: [
SizedBox(
height: kToolbarHeight,
child: ListView(
scrollDirection: Axis.horizontal,
children: List.generate(4, (index) => Text("item $index")),
),
),
],
),
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 20, 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, 20, 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, 20, 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() => Padding(
padding: const EdgeInsets.fromLTRB(150, 20, 20, 0),
child: 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.shade400,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
),
);
}
uj5u.com熱心網友回復：
我知道怎么裝飾那個盒子。想知道我想把它放在搜索欄前面的位置
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 60,
width: 60,
)
), ],
uj5u.com熱心網友回復：
這就是我安排我的代碼的方式。盡管如此，我還是無法讓綠框和搜索欄都平行。我怎樣才能正確安排呢？
body: ListView(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 50, 0, 0), child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 60,
width: 60,
)
),
],
),
),
buildSearchInput(),
Widget buildSearchInput() => Padding(
padding: const EdgeInsets.fromLTRB(150, 0, 20, 0),
child: 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.shade400,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
),
);
uj5u.com熱心網友回復：
這就是我放置的方式。但是搜索欄現在消失了。
body: ListView(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 50, 0, 0), child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 60,
width: 60,
)
),
buildSearchInput(),
],
),
),
Widget buildSearchInput() => Padding(
padding: const EdgeInsets.fromLTRB(160, 0, 20, 0),
child: 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.shade400,
),
// Padding(
// padding: const EdgeInsets.fromLTRB(100, 0, 5, 0),
// child: Icon(
// Icons.search,
// size: 30,
// color: Colors.grey.shade400,
//
// ),
// ),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
),
);
uj5u.com熱心網友回復：
試試這個，你需要把你的 buildSearchInput() 放在 Row
return ListView(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround, // Try play with this
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 50, 0, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 60,
width: 60,
)),
Expanded(child:buildSearchInput()), // Here inside the row
],
),
/// Other widgets...
],
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/420278.html
標籤：