#flutter #dart #spinner #future #opacity
#flutter #dart #счетчик #будущее #непрозрачность
Вопрос:
На данный момент я получаю белый фон с вращением CircularProgressIndicator , когда я провожу пальцем по новому маршруту. Новый маршрут имеет Future , который извлекает данные из HTTP Post . Вместо этого я бы хотел, чтобы фон исходной страницы оставался за спиннером до завершения future и перехода. Итак, как мне сделать фон блесен прозрачным вместо белого? Вот код для будущего, в котором, как я полагаю, запускается счетчик;
FutureBuilder<List<ReplyContent>> replyStage({String replyid, String replytitle}) {
return new FutureBuilder<List<ReplyContent>>(
future: downloadReplyJSON(),
builder: (context, snapshot) {
if (snapshot.hasData) {
List<ReplyContent> replycrafts = snapshot.data;
return StageBuilderVR(replycrafts, replytitle);
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
return CircularProgressIndicator();
},
);
}
И вот код, который перемещает в будущее;
onSwipeUp: () {
Navigator.of(context).push(_createRoute());
}
И код для PageRouteBuilder :
Route _createRoute() {
return PageRouteBuilder(
opaque: false,
pageBuilder: (context, animation, secondaryAnimation) => ReplyHome(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
var begin = Offset(0.0, 1.0);
var end = Offset.zero;
var curve = Curves.ease;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(
position: animation.drive(tween),
child: child,
);
},
);
}
Ответ №1:
Вы можете использовать ShowDialog для открытия диалогового окна, которое откроет прозрачный фон с AlertDialog, вы можете вернуть свой собственный виджет с отслеживанием состояния. Вместо StreamBuilder просто используйте future Builder.
попробуйте следующий код:
void uploadAndShowProgress() async {
await showDialog(
context: context,
builder: (context) {
return StreamBuilder(
stream: uploadFile(),
builder: (context, snapshot) {
if (snapshot.hasData) {
StorageTaskEvent event = snapshot.data;
final _snapshot = event.snapshot;
_progress = _snapshot.bytesTransferred / _snapshot.totalByteCount;
} else {
//* pop when there's no data or error...
Navigator.pop(context);
}
if (snapshot.hasError) {
SnackbarWidget.showSnackbar(
content: Text(snapshot.error.toString()), context: context);
}
return AlertDialogWidget(progress: _progress);
},
);
},
);
}
Комментарии:
1. Я получил ошибку подчеркивания красным цветом в «context» в «context: контекст».
2. Я только что отредактировал op с помощью кода, который вызывает будущее.
Ответ №2:
эта функция отправляет маршрут с прозрачным фоном
onPressed: () {
Navigator.of(context).push(
PageRouteBuilder(
opaque: false,
pageBuilder: (_, __, ___) {
return MyTransperentRoute();
},
),
);
}
итак, на вашей странице CircularProgressIndicator вы можете изменить цвет фона корневого виджета, например, color: Colors.transperent или обычный Container без какого-либо набора цветов, чтобы добиться нужного вам эффекта
class MyTrnsperentPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: const Center(
child: CircularProgressIndicator(),
),
);
}
}
смотрите рабочий код на dartpad здесь
Комментарии:
1. Что я должен указать для «PageBuilder: (_, __, ___» ?
2. Используйте как есть, это параметры функции, если вы нажмете на нее ctrl, вы увидите, что это такое
3. Щелчок управления сообщает мне, что «Во всех местах не найдено использований».
4. Давайте посмотрим, как вы это используете, вам нужно импортировать
5. Я попытался добавить ваше предложение «PageRouteBuilder( непрозрачный: false», используя пример из Flutter. разработчик, но фон остается сплошным белым во время перехода. Вероятно, это происходит из индикаторов выполнения в будущем. Вот код, который я использовал из примера flutter.dev; flutter.dev/docs/cookbook/animation/страница-маршрут-анимация
Ответ №3:
Stack(
children: <Widget>[
Opacity(
opacity: _isLoading ? 1.0 : 0,
child: CircularProgressIndicator(),
),
],
);
Комментарии:
1. Я обернул circularprogressindicator стеком, но Android Studio подчеркнула «_isLoading» красным. Как мне проверить, загружается ли он?
2. Вы пишете аналогично этому; возвращаете непрозрачность ( непрозрачность: 1.0, дочерний элемент: CircularProgressIndicator(), ),
3. Есть ли шанс, что вы могли бы отредактировать свой ответ, чтобы показать, где я должен писать; вернуть непрозрачность ( непрозрачность: 1.0, дочерний элемент: CircularProgressIndicator(), ), ?
4. Это дало мне прозрачный CircularProgressIndicator() вместо прозрачного фона.
Ответ №4:
В итоге я создал фиктивную страницу, которая графически отражала предыдущую страницу со всеми графическими элементами предыдущей страницы и без кода. Я поместил это вместо CircularProgressIndicator. Я не знаю, идеально ли это, но, похоже, работает хорошо.
FutureBuilder<List<ReplyContent>> replyStage({String replyid, String replytitle}) {
return new FutureBuilder<List<ReplyContent>>(
future: downloadReplyJSON(),
builder: (context, snapshot) {
if (snapshot.hasData) {
List<ReplyContent> replycrafts = snapshot.data;
return StageBuilderVR(replycrafts, replytitle);
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
return DummyPage();
},
);
}