如何解决是否可以仅基于flex创建像这样的菜单栏布局?
这是html:
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',theme: ThemeData(
primarySwatch: Colors.blue,),home: Scaffold(
body: SafeArea(
child: MyHomePage(),);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ScrollController controller = ScrollController();
@override
Widget build(BuildContext context) {
return CustomScrollView(
physics: ClampingScrollPhysics(),controller: controller,slivers: [
SliverAppBar(
expandedHeight: 220.0,floating: true,pinned: true,snap: true,elevation: 50,backgroundColor: Colors.pink,leading: IconButton(
icon: Icon(Icons.filter_1),onPressed: () {},flexibleSpace: _MyAppSpace(),SliverList(
delegate: SliverChildListDelegate(
List.generate(
200,(index) => Card(
child: Padding(
padding: EdgeInsets.all(10),child: Text('text $index'),)
],);
}
}
class _MyAppSpace extends StatelessWidget {
const _MyAppSpace({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context,c) {
final settings = context
.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
final deltaExtent = settings.maxExtent - settings.minExtent;
final t =
(1.0 - (settings.currentExtent - settings.minExtent) / deltaExtent)
.clamp(0.0,1.0) as double;
final fadeStart = math.max(0.0,1.0 - kToolbarHeight / deltaExtent);
const fadeEnd = 1.0;
final opacity = 1.0 - Interval(fadeStart,fadeEnd).transform(t);
return Opacity(
opacity: opacity,child: Column(
children: [
Flexible(
child: Container(
width: double.infinity,child: Image.network(
'https://images.pexels.com/photos/443356/pexels-photo-443356.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',fit: BoxFit.cover,Padding(
padding: const EdgeInsets.all(8.0),child: Text(
'Title',style: TextStyle(
color: Colors.white,fontSize: 26.0,fontWeight: FontWeight.bold,],);
},);
}
}
元素1将放置在最左侧,而元素2将放置在中间。 目前,我使用flex和position来实现这种布局。但是我想知道是否可以在不使用position或grid的情况下创建这种布局。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。