Я потратил пару часов только на то, чтобы создать многоразовый виджет во флаттере. Мой ожидаемый результат будет таким:
но я застрял, чтобы заполнить ширину непрозрачности в зависимости от его родителя следующим образом:
вот код, который я пробовал:
Stack(
children: <Widget>[
Container(
padding: const EdgeInsets.all(12),
child: Image.network(
"https://raw.githubusercontent.com/flutter/website/master/examples/layout/lakes/step5/images/lake.jpg",
fit: BoxFit.cover
)
),
Positioned(
left: 15,
bottom: 15,
child: Container(
decoration: BoxDecoration(
color: Color.fromRGBO(0, 0, 0, 0.5)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text("TITLE", style: new TextStyle(fontSize: 28, color: Colors.white)),
new Text("Sub Title", style: new TextStyle(fontSize: 20, color: Colors.white))
],
),
FlatButton(
color: Colors.red[400],
highlightColor: Colors.red[900],
onPressed: (){},
child: new Text("Book Now", style: new TextStyle(fontSize: 28, color: Colors.white)),
)
],
),
)
)
],
)
любое предложение?
Вместо этого
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text("TITLE", style: new TextStyle(fontSize: 28, color: Colors.white)),
new Text("Sub Title", style: new TextStyle(fontSize: 20, color: Colors.white))
],
),
FlatButton(
color: Colors.red[400],
highlightColor: Colors.red[900],
onPressed: (){},
child: new Text("Book Now", style: new TextStyle(fontSize: 28, color: Colors.white)),
)
],
),
Вы можете использовать виджет ListTile
внутри позиционированного и контейнера, в котором есть title
, subtitle
и trailing
(кнопка «Забронировать» может быть размещена здесь). И сделайте цвет фона контейнера черным/белым с непрозрачностью.
не могли бы вы обновить свой вопрос с помощью listTile и всей ошибки.
я не могу из-за слишком большого количества кода, но ошибка выглядит как i.stack.imgur.com/c2VDp.png
Краткий ответ:
Вам нужно добавить свойство right
в виджет Positioned
. Так
Positioned(
left: 15,
bottom: 15,
right: 0,
...)
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Title")),
body: Container(
width: 300,
height: 300,
child: Stack(
alignment: Alignment.bottomLeft,
children: <Widget>[
Image.asset(
"assets/images/chocolate_pic.png",
width: 300,
height: 300,
fit: BoxFit.cover,
),
Container(
color: Colors.black.withOpacity(0.5),
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text("Awesome", style: TextStyle(fontSize: 28)),
Text("Chocolate", style: TextStyle(fontSize: 22)),
],
),
)
],
),
),
);
}
Можете ли вы привести пример в зависимости от моей проблемы? Я пытался использовать
ListTile
, но получил ошибку Следующее утверждение было выдано во время выполнения Layout()