Flutter 快速生成代码+学习心得

Flutter 快速生成代码+学习心得：

Container

///黑色线性渐变
blackLinearGradient({bool fromTop = false}) {
  return LinearGradient(
      begin: fromTop ? Alignment.topCenter : Alignment.bottomCenter,
      end: fromTop ? Alignment.bottomCenter : Alignment.topCenter,
      colors: [
        Colors.black54,
        Colors.black45,
        Colors.black38,
        Colors.black26,
        Colors.black12,
        Colors.transparent
      ]);
}
Container(
    margin: EdgeInsets.only(left: 16),
    padding: EdgeInsets.fromLTRB(6, 2, 6, 2),
    decoration: new BoxDecoration(
          gradient: blackLinearGradient(fromTop: true),
          border: new Border.all(
              color: Color(CHSColorRedView),
              width: 1.0,
          ),
          borderRadius:new BorderRadius.all(new Radius.circular(4.0)),
    ),
    child: Text(
        "广告",
        style: TextStyle(color: Colors.white, fontSize: 12),
    ),
)

Text

Text(
    "${topModel.title}",
    maxLines: 1,
    overflow:TextOverflow.ellipsis,
    style: TextStyle(
          fontSize: 12,
          color: Colors.white,
    )
)

Image

Image.asset(
    'assets/images/mg_watch_history.png',
)

FadeInImage 圆形图片

new Container(
    width: 45.0,
    height: 45.0,
    margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
    child: ClipRRect(
        borderRadius: BorderRadius.circular(22.5),
        child: FadeInImage.assetNetwork(
            placeholder: "assets/images/ylz_blank_circular.jpg",
            image: homeSonPage.item?.imgUrl ?? "",
            fit: BoxFit.cover,
        ),
    ),
 )

Row

crossAxisAlignment：子组件沿着 Cross 轴（在 Row 中是纵轴）如何摆放，其实就是子组件对齐方式，可选值有：
    CrossAxisAlignment.start：子组件在 Row 中顶部对齐
    CrossAxisAlignment.end：子组件在 Row 中底部对齐
    CrossAxisAlignment.center：子组件在 Row 中居中对齐
    CrossAxisAlignment.stretch：拉伸填充满父布局
    CrossAxisAlignment.baseline：在 Row 组件中会报错
mainAxisAlignment：子组件沿着 Main 轴（在 Row 中是横轴）如何摆放，其实就是子组件排列方式，可选值有：
    MainAxisAlignment.start：靠左排列
    MainAxisAlignment.end：靠右排列
    MainAxisAlignment.center：居中排列
    MainAxisAlignment.spaceAround：每个子组件左右间隔相等，也就是 margin 相等
    MainAxisAlignment.spaceBetween：两端对齐，也就是第一个子组件靠左，最后一个子组件靠右，剩余组件在中间平均分散排列
    MainAxisAlignment.spaceEvenly：每个子组件平均分散排列，也就是宽度相等
Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start
    children: []
)

Column

crossAxisAlignment：子组件沿着 Cross 轴（在 Row 中是纵轴）如何摆放，其实就是子组件对齐方式，可选值有：
    CrossAxisAlignment.start：子组件在 Row 中顶部对齐
    CrossAxisAlignment.end：子组件在 Row 中底部对齐
    CrossAxisAlignment.center：子组件在 Row 中居中对齐
    CrossAxisAlignment.stretch：拉伸填充满父布局
    CrossAxisAlignment.baseline：在 Row 组件中会报错
mainAxisAlignment：子组件沿着 Main 轴（在 Row 中是横轴）如何摆放，其实就是子组件排列方式，可选值有：
    MainAxisAlignment.start：靠左排列
    MainAxisAlignment.end：靠右排列
    MainAxisAlignment.center：居中排列
    MainAxisAlignment.spaceAround：每个子组件左右间隔相等，也就是 margin 相等
    MainAxisAlignment.spaceBetween：两端对齐，也就是第一个子组件靠左，最后一个子组件靠右，剩余组件在中间平均分散排列
    MainAxisAlignment.spaceEvenly：每个子组件平均分散排列，也就是宽度相等
Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start
    children: []
)

ListView

ListView.builder(
    scrollDirection: Axis.horizontal,
    itemBuilder: (context, index) {
          VideoModel videoModel = homeModel.hotvideo![index];
          return InkWell(
              child: Container(
               ),onTap: () {
          });
    },
    itemCount: homeModel.hotvideo?.length ?? 0,
)

Stack (层叠布局)

Stack(
    children: [
        new Container(
            child: ClipRRect(
                child: FadeInImage.assetNetwork(placeholder: "assets/images/ylz_blank_rectangle.png",image: homeSonPage.item?.imgUrl ?? "",fit: BoxFit.fill,
                ),
            ),
        ),
        Positioned(
            child: Text(homeSonPage.item?.content ?? ""),
            left: 16,
            top: 30
        )
    ]
)

flutter_sticky_header: ^0.6.0 的使用

Expanded(
    child: Container(
        child: CustomScrollView(
            slivers: [
                _StickyHeaderList(index: 0),
                _StickyHeaderList(index: 1)
            ],
        reverse: false,
    ),
  )
)
#List 视图：
class _StickyHeaderList extends StatelessWidget {
  GlobalKey<State>? stateKey = GlobalKey();
  _StickyHeaderList({Key? key, this.index}) : super(key: key);
  final int? index;
  @override
  Widget build(BuildContext context) {
    return SliverStickyHeader(
      sticky: false,   #头部是否固定
      header: Container(
      ),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, i) {
            return YLZMineMemberWidget(); 
          },
          childCount: 5,
        ),
      ),
    );
  }
}
#Grid 视图：
class _StickyHeaderGrid extends StatelessWidget {
  const _StickyHeaderGrid(
      {Key? key})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SliverStickyHeader(
        sticky: false,   #头部是否固定
        header: buildHeaderContainer(),
        sliver: SliverPadding(
          padding: EdgeInsets.all(16.0),
          sliver: buildSliverGrid(
              context)
        ));
  }
  SliverGrid buildSliverGrid(
      BuildContext context) {
      double cellWidth = (MediaQuery.of(context).size.width - 32);
      double desiredCellHeight = 160;
      double childAspectRatio = cellWidth / desiredCellHeight;
      return SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 1,
            crossAxisSpacing: 16.0,
            mainAxisSpacing: 16.0,
            childAspectRatio: childAspectRatio),
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            return Stack();
          },
          childCount: 1,
        ),
      );
    }
  }
  Container buildHeaderContainer() {
      return Container();
  }
}

Provider5.0 的使用：

import 'package:provider/provider.dart';
//注册Provider：
return MultiProvider(
    providers: [
        ChangeNotifierProvider(create: (_) => CHSCodeProvider())
    ],
    child: ScreenUtilInit(
        designSize: Size(1125, 2436),
        builder: () => buildMaterialApp(widget)
    ),
);

class CHSCodeProvider with ChangeNotifier, DiagnosticableTreeMixin {
  String _barCodeBytes = "";
  String _codeBytes = "";

  String get barCodeBytes => _barCodeBytes;
  String get codeBytes => _codeBytes;

  void setBarCodeBytes(String barCodeBytes) {
    _barCodeBytes = barCodeBytes;
    notifyListeners();
  }
  void setCodeBytes(String codeBytes) {
    _codeBytes = codeBytes;
    notifyListeners();
  }
  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(StringProperty('barCodeBytes', barCodeBytes));
    properties.add(StringProperty('codeBytes', codeBytes));
  }
}

//改：
context.read<CHSCodeProvider>().setBarCodeBytes("${_randomBit(10)}");
context.read<CHSCodeProvider>().setCodeBytes("${_randomBit(10)}");

//收：
context.watch<CHSCodeProvider>().barCodeBytes
context.watch<CHSCodeProvider>().codeBytes

StateKey 的使用：

GlobalKey<CHSHomeNavigationWithSearchWidgetState>
      homeNavigationWithSearchWidgetStateKey = GlobalKey();

class CHSHomeNavigationWithSearchWidget extends StatefulWidget {
  final Key key;
  const CHSHomeNavigationWithSearchWidget(this.key)
      : super(key: key);
  @override
  CHSHomeNavigationWithSearchWidgetState createState() =>
      CHSHomeNavigationWithSearchWidgetState();
}
class CHSHomeNavigationWithSearchWidgetState
    extends State<CHSHomeNavigationWithSearchWidget> {
  void changeHomeOpacity(double homeAplhaOpacity, double aplhaOpacity) {
  }
}

CHSHomeNavigationWithSearchWidget(homeNavigationWithSearchWidgetStateKey);

//调用：
homeNavigationWithSearchWidgetStateKey.currentState
            ?.changeHomeOpacity(0.0, 1.0);

Listener 的使用：CHSHomeNavigationWidgetClickListener

typedef void CHSHomeNavigationWidgetClickListener();

class CHSHomeNavigationWidget extends StatefulWidget {
  final Key key;
  final CHSHomeNavigationWidgetClickListener clickListener;
  const CHSHomeNavigationWidget(this.key, this.clickListener) : super(key: key);
  @override
  CHSHomeNavigationWidgetState createState() => CHSHomeNavigationWidgetState();
}

class CHSHomeNavigationWidgetState extends State<CHSHomeNavigationWidget> {
    @override
    Widget build(BuildContext context) {
        return InkWell(
            onTap:() {
                if (widget.clickListener != null) {
                    widget.clickListener();
                }
            }
        );
    }
}

Flutter 打包 的使用：

打包安卓：
/Users/stone/Flutter/flutterSdk/bin/flutter --no-color build apk --no-sound-null-safety

打包iOS：
/Users/stone/Flutter/flutterSdk/bin/flutter --no-color build ios --no-sound-null-safety

Run Platform:
flutter run --no-sound-null-safety