我正在尝试使用TypeScript和样式化组件来构建网格组件。我将以下文件保存到 Grid 文件夹中：
网格（TextEditingController）具有可以设置为import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return MyHomePageState();
}
}
class MyHomePageState extends State<MyHomePage> {
GlobalKey<FormState> _formKey = GlobalKey<FormState>();
String _usernameValue;
String _passwordValue;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(hintText: "Username"),
// Callback when _formKey.currentState.validate(); is called
validator: (value) {
if (value.isEmpty) {
return "Username is required";
} else {
_usernameValue = value;
return null;
}
},
),
TextFormField(
decoration: InputDecoration(hintText: "Password"),
obscureText: true,
// Callback when _formKey.currentState.validate(); is called
validator: (value) {
if (value.isEmpty) {
return "Password is required";
} else {
_passwordValue = value;
return null;
}
},
),
],
),
),
FlatButton(
child: Text("Save"),
onPressed: () {
if (_formKey.currentState.validate()) {
// Use the values here if the form with the unique form key has no errors
print("Username $_usernameValue");
print("Password $_passwordValue");
// TODO: Send data to firebase here
}
},
),
],
),
),
);
}
}
的道具（index.tsx）。我希望能够将此道具传递到gutters，并在这种情况下输出不同的CSS。
marginCell.tsx我想计算[断点宽度]-2rem（断点是在import * as React from "react";
import styled, { css } from "styled-components";
import { Cell } from "./Cell";
export { default as Cell, ICellProps } from "./Cell";
export interface IGridProps {
className?: string;
/** Grid items */
children: any;
/** Grid gutters */
gutters?: "padding" | "margin" | "none";
}
export const Grid = styled.div<IGridProps>`
${p => p.gutters !== "none" && css`
margin-right: -1rem;
margin-left: -1rem;
`}
${p => p.gutters === "padding" && css`
& > ${Cell} {
padding-right: 1rem;
padding-left: 1rem;
}
`}
${p => p.gutters === "margin" && css`
& > ${Cell} {
margin-right: 1rem;
margin-left: 1rem;
}
`}
`;
export default ({
className,
children,
gutters = "none",
}: IGridProps) => (
<Grid
className={className}
gutters={gutters}
>
{children}
</Grid>
);
中用import * as React from "react";
import styled, { css } from "styled-components";
import { IGridProps } from "./";
interface ICell {
s: number;
offset?: number;
}
export interface ICellProps extends IGridProps {
className?: string;
children: any;
sm?: ICell;
md?: ICell;
lg?: ICell;
}
const calcWidth = (size: number) => `${(size / 12) * 100}%`;
export const Cell = styled.div<ICellProps>`
flex: 0 0 auto;
min-width: 0;
width: 100%;
min-height: 0;
${p => p.sm && css`
@media screen and (min-width: 0) {
margin-left: ${p.sm.offset && calcWidth(p.sm.offset)};
width: ${p.gutters === "margin" ? `calc(${p.sm.s && calcWidth(p.sm.s)} - 2rem)` : (p.sm.s && calcWidth(p.sm.s))};
}
`}
`;
export default ({
className,
children,
sm,
md,
lg,
}: ICellProps) => (
<Cell
className={className}
sm={sm}
md={md}
lg={lg}
>
{children}
</Cell>
);
，sm和md道具定义的）。这是我在lg的这一行中试图实现的目标：
Cell.tsx我知道这不是它的工作原理，但是我还没有找到从父母那里传递道具的方法。
我已经尝试使用Google搜索了好几个小时，却找不到任何东西，因此，非常感谢能帮助我走上正轨的任何帮助。