#flutter
#flutter
Вопрос:
Я создаю приложение flutter, в котором я использую body в качестве стека, и в этом стеке у меня есть два дочерних элемента.Один — основной корпус, а другой — кнопка возврата, которая находится в верхней части экрана.Первым дочерним элементом стека является scrollview.Вот мой метод сборки.
Widget build(BuildContext context) {
return Scaffold(
//debugShowCheckedModeBanner: false,
key: scaffoldKey,
backgroundColor: Color(0xFF5E68A6),
body: Stack(
children: <Widget>[
Container(
margin: const EdgeInsets.fromLTRB(0.0, 10.0 , 0.0 , 0.0 ),
height: double.infinity,
child:CustomScrollView(
slivers: <Widget>[
new Container(
margin: EdgeInsets.all(15.0),
child:Text(getTitle(),
style: TextStyle(fontSize: 20.0,fontWeight: FontWeight.bold,color: Colors.white),
),
),
//middle section
_isLoading == false ?
new Expanded(child: GridView.builder(
itemCount: sub_categories_list.length,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (context, position){
return InkWell(
child: new Container(
//color: Colors.white,
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(10),
height: 130,
width: 130,
child: new Center(
child :
Text(sub_categories_list[position].name,
style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold),
)
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(16)),
// border: Border.all(color: Colors.black, width: 3),
),
),
onTap: () {
//write here
// Fluttertoast.showToast(msg: "You clicked id :" sub_categories_list[position].cat_id.toString());
Navigator.pushNamed(context, '/advicemyself');
},
);
}
))
:
CircularProgressIndicator(),
Container(
margin: EdgeInsets.all(18.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Column(
children: <Widget>[
Image.asset('assets/bt1.png'),
Container(
margin: EdgeInsets.all(10.0),
child: Text("FIND HELP",
style: TextStyle(fontSize: 18.0,color: Colors.white),
),
)
],
),
new Column(
children: <Widget>[
Image.asset('assets/bt2.png'),
Container(
margin: EdgeInsets.all(10.0),
child: Text("HOME",
style: TextStyle(fontSize: 18.0,color: Colors.white),
),
)
],
),
new Column(
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('assets/bt3.png'),
Container(
margin: EdgeInsets.all(10.0),
child: Text("CALL 999",
style: TextStyle(fontSize: 18.0,color: Colors.white),
),
)
],
),
],
),
),
],
),
),
Positioned(
left: 10,
top: 30,
child: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () => {
//go back
},
color: Colors.white,
iconSize: 30,
),
),
// makeview()
],
),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
Я также пробовал использовать SingleChildScrollView, но это также не работает.Что я здесь делаю не так?
Вот ссылка на дизайн, который я хочу сделать.
Обратная сторона должна быть выше вида прокрутки, поэтому я использовал виджет стека.
Комментарии:
1. Я могу напрямую запустить ваш код, можете ли вы объяснить, что происходит, когда вы размещаете вид прокрутки внутри стека. И я не вижу никаких причин использовать виджет стека, посмотрев на предоставленный вами пример изображения.
2. можете ли вы сказать мне, как сделать макет как на изображении без стека
3. Просто используйте каркас с этим цветом фона (таким образом, вы можете использовать AppBar с прозрачным цветом фона и высотой: 0.0), а для кругов используйте gridview с контейнерами для хранения вашего текста.
Ответ №1:
При запуске вашего примера кода, похоже, нет необходимости в перекрывающихся виджетах. Использование Stack кажется ненужным. Один из способов, который вы могли бы сделать, это использовать Column виджет и использовать Expanded так, как вы считаете нужным.
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Widget(), // back button goes here
CustomScrollView(...),
],
),
);
}
В противном случае, если вам действительно нужно использовать Stack, функция прокрутки должна работать нормально. Я пробовал это локально, и виджет Stack не мешает прокрутке Slivers, ListView и GridView.
Stack(
children: [
/// Can be GridView, Slivers
ListView.builder(),
/// Back button
Container(),
],
),